useEffect ਕੀ ਹੈ ਅਤੇ ਇਹ ਕਦੋਂ ਚਲਦਾ ਹੈ?

Question

Accepted Answer

`useEffect` **side effects** ਚਲਾਉਂਦਾ ਹੈ — ਉਹ ਕਾਰਜ ਜੋ React ਦੀ rendering ਤੋਂ ਬਾਹਰ ਜਾਂਦੇ ਹਨ, ਜਿਵੇਂ ਡੇਟਾ fetching, subscriptions, timers, ਜਾਂ manual DOM updates। ਇਹ ਕੰਪੋਨੈਂਟ ਦੇ render ਹੋਣ ਤੋਂ **ਬਾਅਦ** ਚਲਦਾ ਹੈ, side effects ਨੂੰ render body ਦੇ ਬਾਹਰ ਰੱਖਦਾ ਹੈ (render ਨੂੰ ਪ਼ਿਓਰ ਹੀ ਰਹਿਣਾ ਚਾਹੀਦਾ ਹੈ)।

## dependency array ਸਮਾਂ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → ਪਹਿਲੀ render ਤੋਂ ਬਾਅਦ ਚਲਦਾ ਹੈ ਅਤੇ ਜਦੋਂ ਵੀ `count` ਬਦਲੇ।
- **`[]`** (empty) → mount ਤੋਂ ਬਾਅਦ **ਇੱਕ ਵਾਰ** ਚਲਦਾ ਹੈ (one-time setup ਲਈ ਚੰਗਾ)।
- **omitted** → **ਹਰ** render ਤੋਂ ਬਾਅਦ ਚਲਦਾ ਹੈ (ਬਹੁਤ ਘੱਟ ਚਾਹੀਦਾ ਹੈ)।

## Cleanup: ਇੱਕ ਫੰਕਸ਼ਨ ਰਿਟਰਨ ਕਰੋ

ਜੇ ਇੱਕ effect ਕੁਝ setup ਕਰਦਾ ਹੈ ਜਿਸ ਨੂੰ tear down ਕਰਨ ਦੀ ਜਰੂਰਤ ਹੈ, ਤਾਂ ਇੱਕ cleanup ਫੰਕਸ਼ਨ ਰਿਟਰਨ ਕਰੋ। React ਇਸ ਨੂੰ ਅਗਲੀ effect run ਤੋਂ ਪਹਿਲਾਂ ਅਤੇ ਜਦੋਂ ਕੰਪੋਨੈਂਟ unmount ਹੋਵੇ ਤਾਂ ਕਾਲ ਕਰਦਾ ਹੈ:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## ਕਿਉਂ cleanup ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

ਇਸ ਤੋਂ ਬਿਨਾਂ, ਹਰ re-run ਇੱਕ ਹੋਰ timer/subscription ਜੋੜੇਗਾ ਅਤੇ ਪੁਰਾਣਾ ਨਹੀਂ ਹਟਾਵੇਗਾ — ਇੱਕ ਕਲਾਸਿਕ memory leak। `[dep]` effect ਲਈ lifecycle ਹੈ: *run effect → (dep changes) → run cleanup → run effect again*।

**Tip:** effects ਦੀ ਵਰਤੋਂ ਉਹ ਚੀਜ਼ਾਂ ਲਈ ਨਾ ਕਰੋ ਜੋ ਤੁਸੀਂ render ਦੌਰਾਨ compute ਕਰ ਸਕਦੇ ਹੋ (ਬਜਾਏ values derive ਕਰੋ), ਅਤੇ ਹਰ ਮੁੱਲ ਜੋ effect ਪੜ੍ਹਦਾ ਹੈ ਉਸ ਨੂੰ dependency array ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ (`react-hooks/exhaustive-deps` lint rule ਮਦਦ ਕਰਦਾ ਹੈ)।