useEffect আর জীবনচক্র — cleanup, dependency আর সাধারণ ভুল

১ · Effect-এর কাজ: বাইরের জগতের সাথে মিল রাখা

“বাজারঘর”-এর কার্ট পাতায় তিনটি দাবি এল। ব্রাউজারের ট্যাবে লেখা থাকবে “কার্ট (৩)”। ফ্ল্যাশ সেলের countdown চলবে। আর স্টকের খবর আসবে socket থেকে। পর্ব ১০-এ আপনি state আর render শিখেছেন, কিন্তু এই তিনটি কাজের কোনোটিই JSX ফেরত দিয়ে হয় না। ট্যাবের লেখা, timer আর socket থাকে React-এর বাইরে।

পর্ব ০৮ থেকে মনে করুন, render মানে শুধু হিসাব: props আর state নিয়ে UI-র বর্ণনা ফেরত দেওয়া। Render-এর ভেতরে timer চালু করা যায় না, কারণ React একটি component যেকোনো সময়ে যতবার দরকার ততবার render করতে পারে। তাহলে বাইরের কাজ করব কোথায়? উত্তর দুটি:

• Event handler: নির্দিষ্ট একটি ঘটনার ফলে যা হবে। “অর্ডার করুন” চাপলে POST অনুরোধ।
• Effect: পাতায় component থাকার কারণেই যা হবে, যেকোনো ক্লিক ছাড়াই। কার্ট পাতা খোলা আছে, তাই socket সংযোগও খোলা থাকবে।

import { useEffect } from 'react';

function CartTitle({ count }) {
  useEffect(() => {
    document.title = `কার্ট (${count})`;   // React-এর বাইরের জিনিস
  }, [count]);                             // count বদলালে আবার মিলবে

  return <h2>আপনার কার্টে {count}টি পণ্য</h2>;
}

useEffect দুটি জিনিস নেয়: একটি setup ফাংশন আর একটি dependency array. React প্রথমে পাতায় DOM বসায়, তারপর setup চালায়। মূল বাক্যটি মনে রাখুন: effect ঘটনায় সাড়া দেয় না, বাইরের জগৎকে React-এর এখনকার state-এর সাথে মিলিয়ে রাখে। ইংরেজিতে একে বলে synchronize.

২ · Mount, update, unmount: ক্রম ধরে দেখা

একটি component যখন প্রথম পাতায় আসে, তাকে বলে mount. Props বা state বদলে আবার render হলে update. পাতা থেকে সরে গেলে unmount. React-এর কাজ দুই ধাপে: render-এ হিসাব, আর commit-এ DOM বদল। Effect চলে commit-এর পরে। ব্রাউজার সাধারণত আগে পর্দা আঁকে (paint), তারপর effect চলে, যাতে পর্দা আটকে না থাকে। তবে ক্লিকের মতো সরাসরি কাজের ফলে হওয়া update-এ React effect paint-এর আগেও চালাতে পারে।

নিচের component ব্যবহারকারীর কার্টের খবরে subscribe করে। “পরে” চেপে দেখুন প্রতিটি ধাপে কোন লাইন চলে:

1function CartBadge({ userId }) {2  const [n, setN] = useState(0);3  useEffect(() => {4    const off = cartFeed.subscribe(userId, setN);5    return () => off();6  }, [userId]);7  return <b>{n}</b>;8}

এবার সত্যিকারের React 19-এ নিজে চালান। তিনটি effect-এর তিন ধরনের dependency, আর component-টি mount, id বদল, একই id-তে render আর unmount হবে:

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function Cart({ id }) {
  console.log('render, id =', id);
  useEffect(() => {
    console.log('A setup');
    return () => console.log('A cleanup');
  });
  useEffect(() => {
    console.log('B setup');
    return () => console.log('B cleanup');
  }, []);
  useEffect(() => {
    console.log('C setup, id =', id);
    return () => console.log('C cleanup, id =', id);
  }, [id]);
  return <p>কার্ট #{id}</p>;
}
const root = createRoot(document.getElementById('root'));
const step = (ms, name, job) => setTimeout(() => {
  console.log('--- ' + name);
  job();
}, ms);
step(0, 'mount', () => root.render(<Cart id={1} />));
step(50, 'id 1 থেকে 2', () => root.render(<Cart id={2} />));
step(100, 'একই id', () => root.render(<Cart id={2} />));
step(150, 'unmount', () => root.unmount());
</script>

Parent আর child থাকলে আরেকটি নিয়ম কাজে লাগে। সত্যিকারের run-এ setup-এর ক্রম ছিল child setup, তারপর parent setup. আর unmount-এ parent cleanup, তারপর child cleanup.

৩ · Dependency array: কখন চলবে, তা আপনি বাছেন না

নতুনদের সবচেয়ে বড় ভুল ধারণা হলো, “কখন চালাতে চাই” ভেবে dependency লেখা। আসল নিয়ম উল্টো: effect-এর ভেতরে যে props, state বা component-এর ভেতরে বানানো মান পড়া হয়, সব তালিকায় থাকবে। আপনি তালিকা বাছেন না; কোড পড়ে তালিকা আপনাআপনি ঠিক হয়। ইচ্ছেমতো বাদ দিলে React-কে মিথ্যা বলা হয়।

তুলনা হয় Object.is দিয়ে, প্রতিটি ঘর আলাদা করে। সংখ্যা আর string মান দিয়ে মেলে। Object, array আর function মেলে পরিচয় দিয়ে, যাকে বলে reference equality. এই পার্থক্য পরে অসীম চক্রের কারণ হবে।

তালিকা মুখস্থ না করে টুলকে দিয়ে যাচাই করান। ESLint-এর exhaustive-deps নিয়ম ঠিক এই কাজ করে। পর্ব ০৫-এ ESLint বসিয়েছিলেন। নিচের কার্ট component-এ দুটি ভুল আছে:

export function Cart({ userId, items }) {
  const [total, setTotal] = useState(0);
  const [cart, setCart] = useState(null);

  useEffect(() => {
    fetch(`/api/cart/${userId}`).then(r => r.json()).then(setCart);
  }, []);

  useEffect(() => {
    setTotal(items.reduce((sum, item) => sum + item.price, 0));
  }, [items]);
  // ...

সত্যিকারের run (eslint 10.14, eslint-plugin-react-hooks 7.1.1):

$ npx eslint src/Cart.jsx

~/bazarghar/src/Cart.jsx
   9:6  warning  React Hook useEffect has a missing dependency: 'userId'.
                 Either include it or remove the dependency array
                 react-hooks/exhaustive-deps
  12:5  error    Error: Calling setState synchronously within an effect
                 can trigger cascading renders
  …
  > 12 |     setTotal(items.reduce((sum, item) => sum + item.price, 0));
       |     ^^^^^^^^ Avoid calling setState() directly within an effect
  …              react-hooks/set-state-in-effect

✖ 2 problems (1 error, 1 warning)

প্রথম সতর্কতার অর্থ: userId বদলালেও পুরোনো ব্যবহারকারীর কার্ট থেকে যাবে। এটি আসল বাগ, আর গ্রাহক একে দেখবেন ভুল কার্ট হিসেবে। দ্বিতীয়টির সমাধান আসবে ৮ নম্বর অংশে। লাইন নম্বর দুটি পুরো ফাইলের, উপরের অংশে শুধু দরকারি লাইন দেখানো হয়েছে।

৪ · Cleanup: যা খুলেছেন, তা বন্ধ করুন

Cleanup হলো setup থেকে ফেরত দেওয়া একটি ফাংশন। নিয়ম সহজ: cleanup setup-এর আয়না। যা শুরু করেছেন, তা থামান; যা যোগ করেছেন, তা সরান। Cleanup না দিলে component চলে গেলেও কাজ পেছনে চলতে থাকে। একে বলে leak, মানে ফুটো: মেমরি, timer আর সংযোগ জমতে থাকে, যা চলতি পাতায় ধীরে ধীরে সমস্যা বাড়ায়।

নিচের কোডে দুটি একই রকম ঘড়ি। একটিতে cleanup নেই, অন্যটিতে আছে। 250 ms পরে দুটিই পাতা থেকে সরানো হবে:

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
let leaked;
function Clock({ label, clean }) {
  const [n, setN] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      console.log(label + ': tick');
      setN(x => x + 1);
    }, 100);
    if (!clean) { leaked = id; return; }
    return () => { clearInterval(id); console.log(label + ': cleanup'); };
  }, []);
  return <p>{label}: {n}</p>;
}
function App() {
  const [show, setShow] = useState(true);
  useEffect(() => {
    setTimeout(() => { console.log('--- সরানো হলো'); setShow(false); }, 250);
  }, []);
  if (!show) return <p>ঘড়ি নেই</p>;
  return <><Clock label="ভুল" /><Clock label="ঠিক" clean /></>;
}
createRoot(document.getElementById('root')).render(<App />);
setTimeout(() => {
  clearInterval(leaked);
  console.log('ডেমো শেষ: ফুটো timer জোর করে থামানো হলো');
}, 650);
</script>

লক্ষ করুন, setN(x => x + 1)-এ পুরোনো n পড়া হয়নি, তাই [] সৎ dependency তালিকা। এই কৌশল ৯ নম্বর অংশে আবার দেখবেন।

৫ · StrictMode: দুবার চলা কেন উপকারী

নিজের project-এ effect-এ console.log লিখে অনেকে অবাক হন: এক mount-এ লেখা আসে দুবার। এটি বাগ নয়। StrictMode development-এ প্রতিটি component mount করার পরপরই একবার নকল unmount আর পুনরায় mount করে। React 18 (২০২২) থেকে এই পরীক্ষা চালু। Vite-এর React template-এ <StrictMode> শুরু থেকেই দেওয়া থাকে।

সত্যিকারের run: React 19.3.1, Vite 8.3.5, Edge ব্রাউজার। একই কোড, একই <StrictMode>, প্রথমে development, পরে production build:

$ npx vite                       # development
setup: resize listener যোগ
cleanup: resize listener সরানো
setup: resize listener যোগ

$ npx vite build && npx vite preview   # production
setup: resize listener যোগ

তাহলে লাভ কী? Cleanup ভুলে গেলে সাথে সাথে ধরা পড়ে। একটি নকল socket দিয়ে একই পরীক্ষা, development-এ:

# cleanup নেই
connect, খোলা সংযোগ = 1
connect, খোলা সংযোগ = 2      ← বাগ, এখনই দেখা গেল

# cleanup আছে
connect, খোলা সংযোগ = 1
disconnect, খোলা সংযোগ = 0
connect, খোলা সংযোগ = 1      ← ঠিক

একটি যাচাই-প্রশ্ন মনে রাখুন: ব্যবহারকারী কি setup, cleanup, setup আর শুধু setup-এর পার্থক্য বুঝতে পারছেন? পারলে cleanup অসম্পূর্ণ। ব্যবহারকারী তো পাতা ছেড়ে ফিরেও আসেন, আর তখন production-এও একই ক্রম হয়। StrictMode শুধু সেই দৃশ্যটি প্রথম সেকেন্ডেই দেখিয়ে দেয়।

৬ · Effect-এ data আনা: loading, error আর race condition

“বাজারঘর”-এর সার্চ বাক্সে যা লেখা হবে, তার ফল দেখাতে হবে। Network-ও বাইরের জগৎ, তাই এখানে effect বৈধ। কিন্তু fetch লিখলেই কাজ শেষ নয়। তিনটি জিনিস আপনাকে সামলাতে হয়: ফল আসার আগে কী দেখাবেন, ব্যর্থ হলে কী দেখাবেন, আর উত্তর উল্টো ক্রমে এলে কী করবেন।

ধরুন “চাল”-এর উত্তর আসতে 300 ms লাগে, “ডাল”-এর 100 ms. ব্যবহারকারী “চাল” লেখার 50 ms পরে “ডাল” লিখলেন:

এখানে কোনো সত্যিকারের network নেই। setTimeout দিয়ে উত্তরের দেরি বানানো হয়েছে। একই ঘটনা ভুল আর ঠিক, দুই কোডে পাশাপাশি চলছে:

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const delay = { চাল: 300, ডাল: 100 };
const fakeFetch = q => new Promise(done =>
  setTimeout(() => done(q + '-এর ফল'), delay[q]));

function Search({ q, fixed }) {
  const name = fixed ? 'ঠিক' : 'ভুল';
  const [result, setResult] = useState('লোড হচ্ছে');
  useEffect(() => {
    let ignore = false;
    fakeFetch(q).then(r => {
      if (fixed && ignore) { console.log(name, 'ফেলে দিল:', r); return; }
      console.log(name, 'বসাল:', r);
      setResult(r);
    });
    return () => { ignore = true; };
  }, [q]);
  return <p>{name}: বাক্সে {q}, তালিকায় {result}</p>;
}
function App() {
  const [q, setQ] = useState('চাল');
  useEffect(() => { setTimeout(() => setQ('ডাল'), 50); }, []);
  return <><Search q={q} /><Search q={q} fixed /></>;
}
createRoot(document.getElementById('root')).render(<App />);
setTimeout(() => console.log(document.body.innerText.trim()), 450);
</script>

আসল fetch: AbortController

ignore flag উত্তর ফেলে দেয়, কিন্তু অনুরোধ চলতেই থাকে। AbortController ব্রাউজারকে অনুরোধটি বাতিল করতে বলে, ফলে ডেটাও বাঁচে। এটি ওয়েব প্ল্যাটফর্মের অংশ, React-এর নয়। Loading আলাদা state না রেখে হিসাব করে নেওয়া হয়েছে: ফলটি এখনকার q-এর না হলে এখনো লোড হচ্ছে। State-এর এমন আকার পর্ব ০৬-এর discriminated union দিয়েও লেখা যায়।

function Products({ q }) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/products?q=${encodeURIComponent(q)}`, { signal: controller.signal })
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);  // 404, 500-এ fetch নিজে ব্যর্থ হয় না
        return res.json();
      })
      .then(data => setResult({ q, items: data.items }))
      .catch(err => {
        if (err.name === 'AbortError') return;              // আমরাই বাতিল করেছি, এটি ত্রুটি নয়
        setResult({ q, failed: true });
      });
    return () => controller.abort();
  }, [q]);

  if (result?.q !== q) return <p>লোড হচ্ছে...</p>;
  if (result.failed) return <p role="alert">পণ্য আনা গেল না। আবার চেষ্টা করুন।</p>;
  return <p>{q}: {result.items}টি পণ্য</p>;
}

একটি সত্যিকারের run. Vite-এর স্থানীয় server-এ নকল API, rice-এর দেরি 300 ms, বাকি শব্দে 100 ms; Playwright দিয়ে Edge চালিয়ে network আর console ধরা হয়েছে। REQ, RES, FAILED লেবেলগুলো আমাদের script-এর, আর favicon-এর একটি অসম্পর্কিত লাইন বাদ দেওয়া হয়েছে। Run-টি development-এ, StrictMode চালু:

REQ api/products?q=rice                 ← প্রথম setup
REQ api/products?q=rice                 ← StrictMode-এর দ্বিতীয় setup
[log] বাতিল: rice AbortError
FAILED api/products?q=rice net::ERR_ABORTED
RES 200 api/products?q=rice
[log] ফল এল: rice
state: rice: 2টি পণ্য
REQ api/products?q=dal
state: লোড হচ্ছে...
REQ api/products?q=oil                  ← 20 ms পরে আরেকটি শব্দ
[log] বাতিল: dal AbortError
FAILED api/products?q=dal net::ERR_ABORTED
RES 200 api/products?q=oil
[log] ফল এল: oil
state: oil: 2টি পণ্য
REQ api/products?q=fail
RES 500 api/products?q=fail
[error] Failed to load resource: the server responded with a status of 500 (Internal Server Error)
[log] ব্যর্থ: fail HTTP 500
state: পণ্য আনা গেল না। আবার চেষ্টা করুন।

তিনটি কথা খেয়াল করুন। বাতিল হওয়া অনুরোধ DevTools-এর Network ট্যাবে “canceled” হিসেবে দেখা যায়, অর্থাৎ StrictMode-এর দ্বিতীয় অনুরোধটিও এখানে ক্ষতি করেনি। HTTP 500-তে fetch reject করে না, তাই res.ok যাচাই না করলে error ধরা পড়ত না। আর abort করলেও server হয়তো কাজ শেষ করে ফেলেছে; বাতিল হওয়া শুধু ব্রাউজারের দিকের নিশ্চয়তা।

আরেকটি প্রচলিত ভুল: useEffect(async () => {...}). Async ফাংশন Promise ফেরত দেয়, অথচ effect-এর ফেরত মান হতে হবে cleanup ফাংশন বা কিছুই না। async/await চাইলে ভেতরে একটি async ফাংশন বানিয়ে ডাকুন।

৭ · Object dependency আর অসীম চক্র

পণ্যের তালিকায় filter object পাঠাতে গিয়ে এই কোড লেখা খুব সহজ। প্রতিটি লাইন যুক্তিসঙ্গত মনে হয়, ESLint-এর dependency-র দাবিও পূরণ হয়েছে। কিন্তু:

1function ProductGrid({ category }) {2  const [items, setItems] = useState([]);3  const filter = { category };4  useEffect(() => {5    loadProducts(filter).then(setItems);6  }, [filter]);7  return <Grid items={items} />;8}

useEffect(() => {
  const filter = { category };          // ভেতরে: dependency আর object নয়
  loadProducts(filter).then(setItems);
}, [category]);                         // string, মান দিয়ে মেলে

সত্যিকারের run-এ { category: 'চাল' } object-কে dependency দিয়ে ভেতরে সরাসরি একটি state বাড়ানো হয়েছিল। React 19.3.1 development-এ Console লাল হলো, ব্রাউজারও চলল:

[error] Maximum update depth exceeded. This can happen when a component
calls setState inside useEffect, but useEffect either doesn't have a
dependency array, or one of the dependencies changes on every render.
…  (3 সেকেন্ডের run-এ এই লাইন ২,৭২৪ বার)
renders after 1.5s: 69843
renders after 3.0s: 141647

# একই কোড, production build (vite preview)
renders after 1.5s: 145142
renders after 3.0s: 296969          ← Console-এ কোনো লেখা নেই

এই সংখ্যা একটি স্থানীয় run-এর, সাধারণ ফল নয়। তবে দুটি শিক্ষা সবখানেই খাটে: এটি কোনো exception নয়, পাতাও ভেঙে পড়েনি, তাই ব্যবহারকারী শুধু গরম ফোন আর ধীর পাতা পাবেন। আর production-এ কোনো সতর্কতাই নেই। ESLint আগেই ধরতে পারে: একই কোডে সে বলেছে The 'filter' object makes the dependencies of useEffect Hook (at line 39) change on every render.

এটি শুধু কাগজের অঙ্ক নয়। Cloudflare-এর প্রকাশিত post-mortem অনুযায়ী, ১২ সেপ্টেম্বর ২০২৫-এর dashboard ও API বিভ্রাটের একটি কারণ ছিল এই ধরনের ভুল: dependency array-তে এমন object, যা প্রতিবার নতুন তৈরি হচ্ছিল, ফলে একই API ডাক এক render-এ বহুবার হচ্ছিল আর একটি ভেতরের service-এর ওপর চাপ বাড়াচ্ছিল। ঘটনাটির আরও কারণ ছিল; বিস্তারিত ভাবনার প্রশ্নে দেখবেন।

৮ · হয়তো আপনার effect লাগবেই না

React-এর নথিতে একটি পুরো অধ্যায়ের নাম “You Might Not Need an Effect”. সবচেয়ে সহজ পরীক্ষা: বাইরের কোনো সিস্টেম জড়িত আছে কি? না থাকলে effect সম্ভবত ভুল জায়গা। সবচেয়ে সাধারণ ভুল হলো derived state: যে মান props বা state থেকে হিসাব করা যায়, তাকে আলাদা state-এ রাখা।

নিচে একই হিসাব দুইভাবে। ১ কেজি থেকে ২ কেজি, প্রতি কেজি 120 টাকা:

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const price = 120;
let badCount = 0, goodCount = 0;   // শুধু গোনার জন্য
function Bad({ qty }) {
  const [total, setTotal] = useState(0);
  useEffect(() => { setTotal(qty * price); }, [qty]);
  console.log('Bad render', ++badCount, 'qty', qty, 'total', total);
  return <p>Bad: {qty} কেজি = {total} টাকা</p>;
}
function Good({ qty }) {
  const total = qty * price;
  console.log('Good render', ++goodCount, 'qty', qty, 'total', total);
  return <p>Good: {qty} কেজি = {total} টাকা</p>;
}
const root = createRoot(document.getElementById('root'));
const show = qty => root.render(<><Bad qty={qty} /><Good qty={qty} /></>);
show(1);
setTimeout(() => show(2), 100);
setTimeout(() => console.log('মোট render: Bad', badCount, 'Good', goodCount), 200);
</script>

Event handler-এর ব্যাপারটি কেন এত জরুরি, তা একটি ঝুঁকির উদাহরণে দেখুন:

// ভুল: ঘটনার কাজ effect-এ
useEffect(() => {
  if (confirmed) fetch('/api/orders', { method: 'POST', body });
}, [confirmed, body]);

// ঠিক: ঘটনার কাজ ঘটনার জায়গায়
async function handleConfirm() {
  await fetch('/api/orders', { method: 'POST', body });
  setConfirmed(true);
}

প্রথম রূপে confirmed সত্য থাকা অবস্থায় component আবার mount হলে অর্ডার আবার যাবে। Development-এ StrictMode-ও এটি দুবার পাঠাতে পারে। আর body বদলালে আরেকটি অর্ডার। মাপকাঠিটি মনে রাখুন: “কারণ ব্যবহারকারী চাপলেন” হলে event handler; “কারণ component পাতায় দেখা যাচ্ছে” হলে effect.

৯ · Stale closure, useEffectEvent আর useLayoutEffect

পর্ব ১০-এ দেখেছেন, প্রতিটি render-এর নিজের snapshot থাকে। Effect-এর ফাংশনও একটি closure: যে render-এ তৈরি, সেই render-এর মান মনে রাখে। Dependency ভুল হলে পুরোনো closure-ই চলতে থাকে। একে বলে stale closure, বাসি হয়ে যাওয়া closure. যেন গত বছরের দামের তালিকা পকেটে নিয়ে বাজারে গেছেন: দোকানের দাম বদলেছে, আপনার কাগজ বদলায়নি।

1function Sale() {2  const [n, setN] = useState(0);3  useEffect(() => {4    const id = setInterval(() => {5      setN(n + 1);6    }, 1000);7    return () => clearInterval(id);8  }, []);9  return <p>{n}</p>;10}

[n] দিলেও ঘড়ি ঠিক চলত, তবে প্রতি সেকেন্ডে interval বন্ধ করে নতুন বসত। Updater function তাই এখানে পরিষ্কার সমাধান। exhaustive-deps নিয়ম এই ভুলও ধরে দেয়।

useEffectEvent: effect-এর ভেতরের “ঘটনা”

ধরুন স্টকের feed-এ সংযোগ হলে একটি বার্তা দেখাবেন, যা theme মেনে চলে। theme dependency-তে দিলে theme বদলালেই সংযোগ কেটে আবার জুড়বে, যা কেউ চায় না। না দিলে stale closure. এই দ্বন্দ্বের জন্য useEffectEvent এসেছে। এটি React 19.2 (অক্টোবর ২০২৫) থেকে React-এর অংশ, আর এই লেখার সময়ে react.dev-এর reference-এ কোনো experimental চিহ্ন ছাড়াই আছে। আমরা React 19.3.1-এ চালিয়ে দেখেছি।

function Room({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    console.log('connected', roomId, 'theme =', theme);   // সবসময় সর্বশেষ মান
  });
  useEffect(() => {
    console.log('connect', roomId);
    const id = setTimeout(() => onConnected(), 50);
    return () => { clearTimeout(id); console.log('disconnect', roomId); };
  }, [roomId]);                                          // onConnected এখানে নয়
  return <p>{roomId} {theme}</p>;
}

# সত্যিকারের run, production build, React 19.3.1
connect stock-1
connected stock-1 theme = light
-- theme বদল                         ← কোনো পুনঃসংযোগ নেই
-- room বদল
disconnect stock-1
connect stock-2
connected stock-2 theme = dark       ← সর্বশেষ theme দেখছে

Effect Event শুধু effect বা অন্য Effect Event-এর ভেতর থেকে ডাকা যায়। Render-এর সময়ে ডাকা, child-এ পাঠানো বা dependency-তে রাখা চলে না। Hook-এর নিয়ম মেনে component-এর শীর্ষেই লিখতে হয়। আর নথি স্পষ্ট বলে: dependency এড়ানোর কৌশল হিসেবে এটি ব্যবহার করবেন না, শুধু সেই যুক্তিতে ব্যবহার করুন যা সত্যিই effect থেকে ঘটা একটি ঘটনা।

useLayoutEffect: paint-এর আগে

useLayoutEffect দেখতে একই, কিন্তু DOM বসার পরে আর ব্রাউজার আঁকার আগে চলে, আর আঁকা আটকে রাখে। দরকার পড়ে তখনই, যখন DOM মেপে অবস্থান ঠিক করতে হয়, যেমন tooltip-এর উচ্চতা দেখে তাকে উপরে না নিচে বসাবেন, যাতে ঝিলিক না দেখা যায়। নথির সতর্কতা: এটি performance-এর ক্ষতি করতে পারে, তাই সম্ভব হলে useEffect-ই ব্যবহার করুন।

১০ · AI-এর যুগে effect যাচাই

Effect-এর বাগ AI-এর লেখা কোডে বিশেষ করে বিপজ্জনক, কারণ দ্রুত localhost-এ সব ঠিক দেখায়। Race condition লাগে ধীর network, leak লাগে বারবার পাতা ঘোরা, আর দ্বিগুণ POST লাগে ঠিক সেই সময়টি। AI প্রায়ই পুরোনো টিউটোরিয়ালের ধরন মেনে লেখে, যেগুলো ছিল class আর শুরুর দিকের hook-এর যুগের।

AI-এর লেখা effect হাতে পেলে

• eslint-plugin-react-hooks চালিয়েছি, আর কোনো সতর্কতা চাপা দেওয়া নেই
• প্রতিটি effect-এ “কোন বাইরের সিস্টেম?” প্রশ্নের উত্তর দিতে পেরেছি
• StrictMode চালু রেখে দেখেছি: setup আর cleanup-এর সংখ্যা মেলে, সংযোগ বা listener জমে না
• Slow 3G throttling-এ দ্রুত টাইপ করে দেখেছি, পুরোনো ফল নতুনকে ঢাকছে না
• Network বন্ধ করে আর HTTP 500 ফিরিয়ে error UI দেখেছি
• ব্যবহৃত API আমার version-এর react.dev নথিতে মিলিয়েছি, diff পড়ে নতুন dependency আর secret খুঁজেছি