useState હૂક કેવી રીતે કાર્ય કરે છે?

Question

Accepted Answer

`useState` કાર્ય ઘટકને **સ્થાનિક, પ્રતિક્રિયાશીલ સ્થિતિ** દેય છે. તે જોડી પરત કરે છે: **વર્તમાન મૂલ્ય** અને **સેટર** કાર્ય. સેટરને બોલાવવાથી નવા મૂલ્ય સાથે પુનઃરેન્ડર શેડ્યુલ કરવામાં આવે છે.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## બે વસ્તુઓ જે શરૂઆતમાં કરનારાઓને આશ્ચર્ય દે છે

**1. અપડેટ્સ અસિંક્રોનસ / બેચ કરવામાં આવે છે.** `count` `setCount` પછીની લાઇનમાં બદલાતો નથી; તેનું નવું મૂલ્ય *આગલા* રેન્ડર પર છે. તેથી આ માત્ર એક વાર વધે છે:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

પગલા **functional updater** નો ઉપયોગ કરો જ્યારે આગલું મૂલ્ય અગાઉના પર આધારિત હોય, કારણ કે React સૌથી છેલ્લું મૂલ્ય પાસ કરે છે:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. પ્રારંભિક મૂલ્ય માત્ર પહેલા રેન્ડર પર ઉપયોગ કરવામાં આવે છે.** મંહગા ડિફોલ્ટ માટે, કાર્ય પાસ કરો તેથી તે એક વાર ચાલે (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## તેનું મહત્વ શા માટે છે

સ્થિતિ એ છે જે ઘટકને ઈન્ટરેક્ટિવ બનાવે છે — જ્યારે પણ સ્થિતિ બદલાય ત્યારે React કાર્યને પુનઃ-ચલાવે છે અને UI ને પુનઃ-રેન્ડર કરે છે.

સ્થિતિને **immutable** તરીકે ગણો: પરિવર્તન કરવાની જાગાએ નવી એરે/ઑબ્જેક્ટ બનાવો, જેમ કે `setItems([...items, x])`, અન્યથા React પરિવર્તન શોધી શકશે નહીં.