useState hook எவ்வாறு செயல்படுகிறது?

Question

Accepted Answer

`useState` ஒரு function component க்கு **local, reactive state** இன் ஒரு பகுதியை வழங்குகிறது. இது ஒரு pair ஐ வருமாறு செய்கிறது: **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 இல் மட்டுமே பயன்படுத்தப்படுகிறது.** ஒரு விலையுயர்ந்த default க்கு, function ஐ அனுப்பவும் இதனால் இது ஒரு முறை இயக்குகிறது (lazy init):

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

## ஏன் இது முக்கியம்

State என்பது ஒரு component ஐ interactive ஆக்குவது — React function ஐ மீண்டும் இயக்குகிறது மற்றும் state மாறும் போது UI ஐ மீண்டும் render செய்கிறது.

State ஐ **immutable** ஆக நடத்தவும்: mutate செய்வதற்கு பதிலாக புதிய array/object ஐ உருவாக்கவும், எ.கா. `setItems([...items, x])`, இல்லாவிட்டால் React மாற்றத்தைக் கண்டறியாமல் இருக்கலாம்.