useState Hooks halten den State (Datenstand) und aktualisieren Ihn. Sie werden beim erstellen und rendern der Komponente aktualisiert.
useState ist für Number, String und kleine Objekte
- setState( ()=>{}) wird synchron aufgerufen
Normale Aktualisierung
- Ausgabe erfolgt synchron
//Übergabe als Objekt, erzeugt mit Spread-Operator eine Kopie, UI //wird immer aktualisiert, da immer neue Kopie bei Aufruf
// erstellt wird
<input type="button" onClick={
setData( {...data})
}
//Übergabe als Objekt, UI wird nicht aktualisiert, da Data-Obj da
//data Objekt bekannt und react reagiert nur auf Änderungen
<input type="button" onClick={
setData(data);
}Funktionale Aktualisierung (empfehlenswert)
- Ausgabe erfolgt asynchron (Konsolenausgabe daher evlt. unterschiedliche Abfolge)
- „Stale State“ (Zustand der nicht aktuell ist), kann verhindert werden
- immer verwenden, gerade wenn Zustände von einander abhängig sind
<p>Funktionale Aktualisierung</p>
<input type="button" onClick={ ()=> setData( prev => {
return {...prev};
})} value="5 - Funktionale Aktualisierung / Neues Objekt ohne Änderungen"></input>
<input type="button" onClick={ ()=> setData( prev => {
return prev;
})} value="6 - Funktionale Aktualisierung / gleiches Objekt ohne Änderungen"></input>
<input type="button" onClick={ ()=> setData( prev => {
prev.first = prev.first +"7";
return prev;
})} value="7 - Funktionale Aktualisierung / Original Objekt mit Änderungen"></input>Lazy intital State
Einmaliges lazy loading, wenn die Komponente erzeugt wird. Zum Beispiel Berechnungen die nur einmal geladen werden sollen.
Lebt solange die Komponente lebt.
//hier wird eine Funktion ausgeführt ……mit ()=>{}
const [data, setData] = useState(()=>{ return [ ….]}) // OK
//hier wird das Ergebnis einer Funktion übergeben, das geht nicht, initData würde bei jedem rendern der Komponente ausgeführt werden
const [data, setData] = useState(initData()) // Nicht OK
// Lazy Intialization State - einmalig beim rendern wird der State initialisiert bspw. für Berechnungen
// die für die Komponente bereitstehen sollen
export function LazyStateTest(){
console.log("---called LazyStateTest---");
const [show, setShow] = useState(false);
return (<Fragment>
<p>Lazy State Initialisierung - wenn Komponente eingeblendet wird</p>
<input type="button" onClick={()=>setShow(prev=> !prev)} value="toggle"></input>
{ show && <LazySate/>}
{ !show && <p>Komponente ausgeblendet</p>}
</Fragment>);
}
function LazySate(){
console.log("---called LazyState---");
const [count, countState] = useState(1)
const [data, setData] = useState(()=>{
console.log("--lazy state init");
return [
{ name:"Name1", age:42},
{ name:"Name2", age:32},
{ name:"Name3", age:14},
{ name:"Name4", age:13},
]
})
return (<>
<p>Konsole öffnen um Ausgabe zu sehen</p>
{data && data.map((entry,key)=>{
return <p key={key}>
<span>{entry.name}</span><span>{entry.age}</span>
</p>})}
</>);
}