useState કાર્ય ઘટકને સ્થાનિક, પ્રતિક્રિયાશીલ સ્થિતિ દેય છે. તે જોડી પરત કરે છે: વર્તમાન મૂલ્ય અને સેટર કાર્ય. સેટરને બોલાવવાથી નવા મૂલ્ય સાથે પુનઃરેન્ડર શેડ્યુલ કરવામાં આવે છે.
[count, setCount] = ();
(count + );
( c + );
useState કાર્ય ઘટકને સ્થાનિક, પ્રતિક્રિયાશીલ સ્થિતિ દેય છે. તે જોડી પરત કરે છે: વર્તમાન મૂલ્ય અને સેટર કાર્ય. સેટરને બોલાવવાથી નવા મૂલ્ય સાથે પુનઃરેન્ડર શેડ્યુલ કરવામાં આવે છે.
[count, setCount] = ();
(count + );
( c + );
1. અપડેટ્સ અસિંક્રોનસ / બેચ કરવામાં આવે છે. count setCount પછીની લાઇનમાં બદલાતો નથી; તેનું નવું મૂલ્ય આગલા રેન્ડર પર છે. તેથી આ માત્ર એક વાર વધે છે:
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
પગલા functional updater નો ઉપયોગ કરો જ્યારે આગલું મૂલ્ય અગાઉના પર આધારિત હોય, કારણ કે React સૌથી છેલ્લું મૂલ્ય પાસ કરે છે:
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
2. પ્રારંભિક મૂલ્ય માત્ર પહેલા રેન્ડર પર ઉપયોગ કરવામાં આવે છે. મંહગા ડિફોલ્ટ માટે, કાર્ય પાસ કરો તેથી તે એક વાર ચાલે (lazy init):
const [data] = useState(() => expensiveInit()); // runs once, not every render
સ્થિતિ એ છે જે ઘટકને ઈન્ટરેક્ટિવ બનાવે છે — જ્યારે પણ સ્થિતિ બદલાય ત્યારે React કાર્યને પુનઃ-ચલાવે છે અને UI ને પુનઃ-રેન્ડર કરે છે.
સ્થિતિને immutable તરીકે ગણો: પરિવર્તન કરવાની જાગાએ નવી એરે/ઑબ્જેક્ટ બનાવો, જેમ કે setItems([...items, x]), અન્યથા React પરિવર્તન શોધી શકશે નહીં.