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. अपडेट्स अतुल्यकालिक / बैच में होते हैं।** `setCount` के बाद की लाइन पर `count` नहीं बदलता; इसका नया मान *अगले* रेंडर पर होता है। तो यह केवल एक बार बढ़ता है:

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

## यह क्यों महत्वपूर्ण है

स्थिति वह है जो एक कंपोनेंट को इंटरेक्टिव बनाती है — जब भी स्थिति बदलती है, React फ़ंक्शन को फिर से चलाता है और UI को पुनः-रेंडर करता है।

स्थिति को **अपरिवर्तनीय** मानें: संशोधित करने के बजाय एक नई सरणी/ऑब्जेक्ट बनाएँ, जैसे `setItems([...items, x])`, अन्यथा React परिवर्तन का पता नहीं लगा सकता।