useState hook कसरी काम गर्छ?

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

जब अगलो मान अघिलाको मानमा निर्भर गर्दछ तब **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
```

## किन यो महत्वपूर्ण छ

State एक कम्पोनेन्टलाई अन्तरक्रियाशील बनाउने कुरा हो — React फंक्शन पुन:चलाउँछ र जब पनि state परिवर्तन हुन्छ UI पुन:रेन्डर गर्छ।

State लाई **immutable** को रूपमा व्यवहार गर्नुहोस्: परिवर्तन गर्नुको सट्टा नयाँ array/object सृजना गर्नुहोस्, जस्तै `setItems([...items, x])`, नत्र React परिवर्तन पत्ता नलगाउन सक्छ।