useState ਹੁੱਕ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ?

Question

Accepted Answer

`useState` ਇੱਕ ਫੰਕਸ਼ਨ ਕੰਪੋਨੈਂਟ ਨੂੰ **ਸਥਾਨਕ, ਪ্রতিক্রিਆਸ਼ੀਲ ਅਵਸਥਾ** ਦਾ ਇੱਕ ਟੁਕੜਾ ਦਿੰਦਾ ਹੈ। ਇਹ ਇੱਕ ਜੋੜਾ ਵਾਪਸ ਕਰਦਾ ਹੈ: **ਵਰਤਮਾਨ ਮੁੱਲ** ਅਤੇ ਇੱਕ **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 ਨੂੰ **ਅਪਰਿਵਰਤਨੀਯ** ਮੰਨੋ: ਮੀਊਟ ਕਰਨ ਦੀ ਬਜਾਏ ਇੱਕ ਨਵਾਂ array/object ਬਣਾਓ, ਜਿਵੇਂ `setItems([...items, x])`, ਨਹੀਂ ਤਾਂ React ਸ਼ਾਇਦ ਤਬਦੀਲੀ ਦਾ ਪਤਾ ਨਾ ਲਗਾ ਸਕੇ।