useState hook ఎలా పనిచేస్తుంది?

Question

Accepted Answer

`useState` function component కు **local, reactive state** ఒక భాగాన్ని ఇస్తుంది. ఇది ఒక జత రిటర్న్ చేస్తుంది: **current value** మరియు **setter** function. Setter ని కాల్ చేయడం కొత్త విలువతో re-render ను షెడ్యూల్ చేస్తుంది.

```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. Updates asynchronous / batched ఉన్నాయి.** `count` ఆ `setCount` తర్వాత లైన్‌లో మారదు; ఇది *next* render లో కొత్త విలువను కలిగి ఉంది. కాబట్టి ఇది ఒక్కసారి మాత్రమే పెరుగుతుంది:

```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. ప్రారంభ విలువ మొదటి render కేవలం ఉపయోగించబడుతుంది.** ఖరీదైన డిఫాల్ట్ కోసం, function ను పాస్ చేయండి కాబట్టి ఇది ఒక్కసారి రన్ చేస్తుంది (lazy init):

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

## ఇది ఎందుకు ముఖ్యమైనది

State ఒక component ను interactive చేసేది — React function ను పునర్‌నిర్వహిస్తుంది మరియు state మారినప్పుడు UI ని పునర్‌రెండర్‌ చేస్తుంది.

State ను **immutable** గా చికిత్స చేయండి: mutating బదులుగా కొత్త array/object ను సృష్టించండి, ఉదా. `setItems([...items, x])`, లేకపోతే React మార్పును గుర్తించకపోవచ్చు.