useEffect নির্ভরতা অ্যারে এবং ক্লিনআপের সাথে সাধারণ ত্রুটিগুলি কী কী?

Question

Accepted Answer

একটি প্রভাব তার **নির্ভরতা** এর উপর ভিত্তি করে পুনরায় চলে, এবং সেই অ্যারেটি ভুল করা হল React বাগের #1 উৎস।

## ত্রুটি 1: নির্ভরতা নিখোঁজ → পুরানো মান

একটি প্রভাব যে রেন্ডার এ তৈরি হয়েছিল সেই মানগুলি ক্যাপচার করে। যদি আপনি একটি নির্ভরতা বাদ দেন, তবে এটি একটি পুরানো মান ব্যবহার করতে থাকে:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ always logs the count from the FIRST render (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps → effect never re-created → `count` frozen at 0
```

সমাধান: হয় deps এ `count` যোগ করুন, অথবা একটি functional updater ব্যবহার করুন যার এটির প্রয়োজন নেই (`setCount(c => c + 1)`)।

## ত্রুটি 2: অস্থিতিশীল নির্ভরতা → প্রভাব প্রতিটি রেন্ডারে চলে

অবজেক্ট/অ্যারে/ফাংশন প্রতিটি রেন্ডারে পুনরায় তৈরি হয়, তাই তারা প্রতিবার "নতুন" এবং প্রভাব কখনও স্থির হয় না:

```jsx
const options = { id }; // ❌ new object every render
useEffect(() => { load(options); }, [options]); // runs every render
```

সমাধান: আদিম মানের উপর নির্ভর করুন (`[id]`), অথবা `useMemo`/`useCallback` দিয়ে memoize করুন।

## ত্রুটি 3: ক্লিনআপ ভুলে যাওয়া → লিক এবং রেস

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

ক্লিনআপ ছাড়াই, একটি ধীর আগের অনুরোধ একটি নতুন অনুরোধের *পরে* সমাধান হতে পারে এবং তাজা ডেটা অতিলিখন করতে পারে (একটি রেস কন্ডিশন), এবং সাবস্ক্রিপশন/টাইমার জমা হতে থাকবে। `react-hooks/exhaustive-deps` ESLint নিয়ম বেশিরভাগ নিখোঁজ-নির্ভরতা ক্ষেত্রে ধরা পড়ে।