useState antaa funktiokomponentille palan paikallista, reaktiivista tilaa. Se palauttaa parin: nykyisen arvon ja setter-funktion. Setterin kutsuminen ajastaa uudelleenrenderöinnin uudella arvolla.
[count, setCount] = ();
(count + );
( c + );
useState antaa funktiokomponentille palan paikallista, reaktiivista tilaa. Se palauttaa parin: nykyisen arvon ja setter-funktion. Setterin kutsuminen ajastaa uudelleenrenderöinnin uudella arvolla.
[count, setCount] = ();
(count + );
( c + );
1. Päivitykset ovat asynkronisia / eritelty. count ei muutu setCount:n jälkeisellä rivillä; sillä on uusi arvo seuraavassa renderöinnissä. Joten tämä lisää vain kerran:
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
Käytä functional updater -tapaa, kun seuraava arvo riippuu edellisestä, koska React välittää uusimman arvon:
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
2. Alkuarvo käytetään vain ensimmäisessä renderöinnissä. Kalliiksi oletukseksi välitä funktio niin, että se suoritetaan kerran (lazy init):
const [data] = useState(() => expensiveInit()); // runs once, not every render
Tila on se, mikä tekee komponentista interaktiivisen — React suorittaa funktion uudelleen ja renderöi UI:n uudelleen aina kun tila muuttuu.
Kohtelee tilaa muuttumattomuutena: luo uusi taulukko/objekti mutatoimisen sijaan, esim. setItems([...items, x]), muuten React ei välttämättä havaitse muutosta.