useEffect কি এবং এটি কখন চলে?

Question

IT Interview Practice · Accepted Answer

`useEffect` **side effects** চালায় — এমন কাজ যা React এর রেন্ডারিং এর বাইরে চলে, যেমন ডেটা ফেচিং, সাবস্ক্রিপশন, টাইমার, বা ম্যানুয়াল DOM আপডেট। এটি কম্পোনেন্ট রেন্ডার হওয়ার **পরে** চলে, side effects গুলিকে রেন্ডার বডির বাইরে রাখে (রেন্ডার অবশ্যই বিশুদ্ধ থাকতে হবে)।

## dependency array টাইমিং নিয়ন্ত্রণ করে

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

- **`[count]`** → প্রথম রেন্ডারের পরে এবং যখনই `count` পরিবর্তন হয় তখন চলে।
- **`[]`** (খালি) → mount এর পরে **একবার** চলে (one-time সেটআপের জন্য ভালো)।
- **বাদ দেওয়া** → **প্রতিটি** রেন্ডারের পরে চলে (যা আপনি চান তা খুব কমই)।

## Cleanup: একটি ফাংশন রিটার্ন করুন

যদি একটি effect এমন কিছু সেট আপ করে যা tear down করার প্রয়োজন, একটি cleanup ফাংশন রিটার্ন করুন। React পরবর্তী effect চালানোর আগে এবং কম্পোনেন্ট 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 এর জীবনচক্র হল: *effect চালান → (dep পরিবর্তন) → cleanup চালান → effect আবার চালান*।

**টিপ:** render এর সময় যা কম্পিউট করতে পারেন তার জন্য effects ব্যবহার করবেন না (পরিবর্তে মান derive করুন), এবং effect যা সব মূল্য পড়ে তা dependency array তে অন্তর্ভুক্ত করুন (`react-hooks/exhaustive-deps` lint রুল সাহায্য করে)।

dependency array টাইমিং নিয়ন্ত্রণ করে

Cleanup: একটি ফাংশন রিটার্ন করুন

Cleanup কেন গুরুত্বপূর্ণ

সম্পর্কিত প্রশ্ন