useState हुक कसे कार्य करते?

Question

Accepted Answer

`useState` एका फंक्शन कम्पोनेंटला एक तुकडा **स्थानिक, प्रतिक्रियाशील state** देते. हे एक जोडी परत करते: **वर्तमान मूल्य** आणि **setter** फंक्शन. setter ला कॉल केल्याने नव्या मूल्यसह पुन्हा रेंडर शेड्यूल केले जाते.

```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
```

जेव्हा पुढील मूल्य मागील मूल्यावर अवलंबून असते तेव्हा **कार्यात्मक अपडेटर** वापरा, कारण 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
```

## हे का महत्वाचे आहे

State हीच गोष्ट आहे जी एक कम्पोनेंटला इंटरॅक्टिव्ह बनवते — React फंक्शन पुन्हा चालवतो आणि जेव्हा state बदलते तेव्हा UI पुन्हा रेंडर करतो.

State ला **अपरिवर्तनीय** समजा: बदलण्याऐवजी नवीन array/object तयार करा, उदा. `setItems([...items, x])`, अन्यथा React चेंज शोधू शकत नाही.