useState daje komponentowi funkcyjnemu kawałek lokalnego, reaktywnego stanu. Zwraca parę: bieżącą wartość i funkcję setter. Wywołanie setter-a planuje ponowne renderowanie z nową wartością.
[count, setCount] = ();
(count + );
( c + );
useState daje komponentowi funkcyjnemu kawałek lokalnego, reaktywnego stanu. Zwraca parę: bieżącą wartość i funkcję setter. Wywołanie setter-a planuje ponowne renderowanie z nową wartością.
[count, setCount] = ();
(count + );
( c + );
1. Aktualizacje są asynchroniczne / grupowane. count nie zmienia się w linii po setCount; ma nową wartość przy następnym renderowaniu. Dlatego ten kod inkrementuje tylko raz:
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
Użyj functional updater, gdy następna wartość zależy od poprzedniej, ponieważ React przesyła najnowszą wartość:
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
2. Wartość początkowa jest używana tylko przy pierwszym renderowaniu. W przypadku kosztownego domyślnie, przekaż funkcję, aby uruchomiła się raz (lazy init):
const [data] = useState(() => expensiveInit()); // runs once, not every render
Stan to to, co czyni komponent interaktywnym — React ponownie uruchamia funkcję i ponownie renderuje interfejs użytkownika, gdy stan się zmienia.
Traktuj stan jako niezmienny: utwórz nową tablicę/obiekt zamiast mutować, np. setItems([...items, x]), w przeciwnym razie React może nie wykryć zmiany.