useState hook کیسے کام کرتا ہے?

Question

Accepted Answer

`useState` ایک function کومپوننٹ کو **مقامی، رد عمل والی حالت** کا ایک حصہ دیتا ہے۔ یہ ایک جوڑی واپس کرتا ہے: **موجودہ قیمت** اور ایک **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
```

## یہ کیوں اہم ہے

حالت وہ چیز ہے جو ایک کومپوننٹ کو انٹرایکٹو بناتی ہے — React فنکشن کو دوبارہ چلاتا ہے اور جب حالت بدلتی ہے تو UI کو دوبارہ رینڈر کرتا ہے۔

حالت کو **تبدیل نہ ہونے والی** سمجھیں: میوٹ کرنے کی بجائے ایک نیا array/object بنائیں، مثلاً `setItems([...items, x])`, ورنہ React تبدیلی کو شاید محسوس نہ کرے۔