useState, bir function bileşenine yerel, reaktif state sağlar. Bir çift döndürür: mevcut değer ve bir setter fonksiyonu. Setter'ı çağırmak yeni değerle bir yeniden render'ı zamanlar.
jsx
[count, setCount] = ();
(count + );
( c + );
useState, bir function bileşenine yerel, reaktif state sağlar. Bir çift döndürür: mevcut değer ve bir setter fonksiyonu. Setter'ı çağırmak yeni değerle bir yeniden render'ı zamanlar.
[count, setCount] = ();
(count + );
( c + );
1. Güncellemeler eşzamansız / toplu işlem olarak gerçekleşir. count, setCount satırından sonra değişmez; sonraki render'da yeni değere sahip olur. Bu yüzden bu sadece bir kez artar:
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
Sonraki değer önceki değere bağlı olduğunda fonksiyonel updater kullanın, çünkü React en son değeri içeri geçirir:
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
2. İlk değer sadece ilk render'da kullanılır. Pahalı bir varsayılan için bir fonksiyon geçirin, böylece bir kez çalışır (lazy init):
const [data] = useState(() => expensiveInit()); // runs once, not every render
State, bir bileşeni etkileşimli hale getiren şeydir — React, state değiştiğinde fonksiyonu yeniden çalıştırır ve UI'yi yeniden render eder.
State'i immutable olarak kabul edin: mutasyon yapmak yerine yeni bir array/object oluşturun, ör. setItems([...items, x]), aksi halde React değişikliği algılayamayabilir.