Hook-এর নিয়ম আর custom hook — useRef, useMemo আর নিজের hook

১ · React কীভাবে মনে রাখে — খাতার লাইন নম্বর

পাড়ার চায়ের দোকানের হিসাব খাতা ভাবুন। দোকানি নাম লেখেন না, শুধু লাইন নম্বর মনে রাখেন। প্রথম লাইনে রহিম ভাই, দ্বিতীয় লাইনে করিম ভাই, তৃতীয় লাইনে সুমন। প্রতিদিন তিনি একই ক্রমে খাতা মেলান। একদিন রহিম ভাই না এলে, আর দোকানি লাইন না ছেড়ে পরের জনকে প্রথম লাইনে বসালে, সবার বাকি উল্টোপাল্টা হয়ে যাবে।

পর্ব ১০-এ দেখেছেন, useState ডাকলে একটি মান পাওয়া যায়। কিন্তু একবার ভাবুন, useState(1) লেখার সময় আপনি কোনো নাম দেননি। qty নামটি তো আপনার ভেরিয়েবলের, React সেটি দেখতেই পায় না। তাহলে পরের render-এ React কীভাবে জানে কোন ডাকের কোন মান?

উত্তর: ক্রম দিয়ে। প্রতিটি component-এর জন্য React একটি খাতা রাখে। প্রথম hook পড়ে প্রথম ঘর, দ্বিতীয় hook পড়ে দ্বিতীয় ঘর। নিচের ছোট্ট মডেলে ঠিক এটুকুই আছে। এটি আসল React নয়, শুধু ধারণার একটি মডেল।

// ছোট্ট মডেল: hook-এর মান থাকে array-তে, কোনো নাম ছাড়া
const hooks = [];   // খাতা
let cursor = 0;     // এখন কোন ঘর পড়ছি

function useState(initial) {
  const slot = cursor;                  // এই ডাকের ঘর নম্বর
  if (!(slot in hooks)) hooks[slot] = initial;
  const setState = (next) => { hooks[slot] = next; };
  cursor = cursor + 1;                  // পরের ডাক, পরের ঘর
  return [hooks[slot], setState];
}
function render(component, props) {
  cursor = 0;                           // প্রতি render শুরু থেকে
  return component(props);
}
let buy;
function Card() {
  const [qty, setQty] = useState(1);
  const [note] = useState('note');
  buy = () => setQty(qty + 1);
  return { qty, note };
}
console.log('correct:', render(Card), hooks);
buy();
console.log('bought :', render(Card), hooks);

hooks.length = 0;                       // খাতা মুছে নতুন পরীক্ষা
function BadCard({ onSale }) {
  const [qty] = useState(1);
  if (onSale) useState('SALE');         // নিয়ম ভাঙা হলো
  const [note] = useState('note');
  return { qty, note };
}
console.log('sale on :', render(BadCard, { onSale: true }), hooks);
console.log('sale off:', render(BadCard, { onSale: false }), hooks);

correct: { qty: 1, note: 'note' } [ 1, 'note' ]
bought : { qty: 2, note: 'note' } [ 2, 'note' ]
sale on : { qty: 1, note: 'note' } [ 1, 'SALE', 'note' ]
sale off: { qty: 1, note: 'SALE' } [ 1, 'SALE', 'note' ]

এবার দুটি render ধীরে ধীরে দেখা যাক। নিচের component-এ তিনটি hook আছে। “পরে” চেপে cursor আর খাতার ঘরগুলো খেয়াল করুন।

1function Card() {2  const [qty, setQty] = useState(1);3  const [note, setNote] = useState('');4  const box = useRef(null);5  return <button ...>{qty}</button>;6}

২ · নিয়ম ভাঙলে আসলে কী হয়

Rules of Hooks মূলত দুটি কথা। এক: hook ডাকুন শুধু component বা custom hook-এর ওপরের স্তরে, কোনো early return-এর আগে। দুই: hook ডাকুন শুধু React function থেকে, সাধারণ JavaScript function থেকে নয়। অর্থাৎ শর্ত, লুপ, event handler, try/catch/finally আর useMemo বা useEffect-এর ভেতরের function-এ hook ডাকা যাবে না।

1function Card({ onSale }) {2  const [qty] = useState(1);3  if (onSale) {4    const [tag] = useState('ছাড়');5  }6  const [note] = useState('নোট');7}

আমাদের ছোট্ট মডেল ভুল মান দিয়ে চলতে থাকে, আসল React কিন্তু গোনে। ঠিক এই component আসল React-এ চালালে কী হয়, দেখুন। সত্যিকারের run, React 19.3.1, development build, jsdom-এ:

--- onSale true -> false
THROWN: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
--- onSale false -> true
React has detected a change in the order of Hooks called by Card. This will lead to bugs and errors if not fixed.

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. useState                   useState
3. undefined                  useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

THROWN: Rendered more hooks than during the previous render.

দুই দিকেই পরিষ্কার error. তবে সবচেয়ে বিপজ্জনক ঘটনাটি অন্য। সংখ্যা ঠিক থাকলে React ধরতে পারে না। দুটি useState-এর ক্রম শর্তের ওপর অদলবদল করলে, একই সেটআপে সত্যিকারের ফল এটি:

render 1: a=A b=B
render 2: a=B b=A

শর্ত লাগলে সমাধান সহজ। Hook সবসময় ডাকুন, শর্ত রাখুন তার ভেতরে বা ব্যবহারে। আর বড় শর্ত হলে আলাদা component বানান, কারণ প্রতিটি component নিজের খাতা পায়।

// ভুল: if (onSale) { useEffect(...) }
// ঠিক: effect সবসময় ডাকা হয়, শর্ত ভেতরে
useEffect(() => {
  if (onSale) document.title = "ছাড় চলছে";
}, [onSale]);

// ঠিক: শর্তের অংশ আলাদা component-এ
{onSale && <SaleBadge product={product} />}

৩ · useRef — যে বাক্স বদলালে পর্দা নড়ে না

useState যেন দোকানের সাইনবোর্ড, বদলালে সবাই দেখে, পুরো দোকান গোছাতে হয়। useRef যেন দোকানির পকেটের চিরকুট, যখন খুশি বদলানো যায়, ক্রেতা কিছু টের পান না। useRef(0) ফেরত দেয় একটি সাধারণ object, { current: 0 }. প্রতিটি render-এ একই object ফেরত আসে, আর current বদলালে render হয় না।

এর দুটি কাজ। এক, DOM-এর আসল element ধরা, যেমন input-এ focus দেওয়া। দুই, এমন মান রাখা যা পর্দায় দেখানো হয় না, যেমন timer-এর id বা কতবার কিছু ঘটল তার গোনা। নিচের কোডে দুটোই আছে। “ঘরে যান” চেপে দেখুন, গোনা বাড়ছে কিন্তু পর্দার সংখ্যা বদলাচ্ছে না।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function SearchBox() {
  const inputRef = useRef(null);   // DOM ধরার হাতল
  const clicks = useRef(0);        // পর্দায় না দেখানো গোনা
  const [shown, setShown] = useState(0);

  useEffect(() => {
    console.log('ref পেলাম:', inputRef.current.tagName);
  }, []);

  function goToInput() {
    inputRef.current.focus();
    clicks.current += 1;
    console.log('গোনা:', clicks.current);
  }
  return (
    <div>
      <input ref={inputRef} placeholder="পণ্য খুঁজুন" />
      <button onClick={goToInput}>ঘরে যান</button>
      <button onClick={() => setShown(clicks.current)}>সংখ্যা দেখান</button>
      <p>পর্দায় সংখ্যা: {shown}</p>
    </div>
  );
}
createRoot(document.getElementById('root')).render(<SearchBox />);
</script>

একটি React 19 খবর: function component এখন ref-কে সাধারণ prop হিসেবে নিতে পারে। আগে যে forwardRef লাগত, নতুন কোডে তা আর দরকার নেই। AI প্রায়ই এখনো forwardRef লেখে। তা ভুল নয়, তবে পুরোনো ধাঁচ।

function SearchInput({ ref, ...rest }) {
  return <input ref={ref} {...rest} />;
}

৪ · useMemo আর useCallback — কী জমা থাকে, কখন লাভ

মুদি দোকানের মাসের হিসাব ভাবুন। দুপুরে কেউ জিজ্ঞেস করলে দোকানি আগে হিসাব করা মোটটা বলে দেন। নতুন মাল না ঢুকলে আবার যোগ করার দরকার নেই। এই কৌশলের নাম memoization. useMemo খাতায় দুটি জিনিস রাখে: আগের ফল, আর যে মানগুলোর ওপর ফলটি নির্ভর করে। Render-এর সময় সে নির্ভরতার মানগুলো Object.is দিয়ে মেলায়। সব এক হলে আগের ফল, একটিও আলাদা হলে নতুন হিসাব।

নিচের ঝুড়িতে দুটি বোতাম। “রং বদলান” render ঘটায়, কিন্তু মোট টাকায় তার প্রভাব নেই। “১০ টাকা ছাড়” মোট বদলায়। render নম্বর লেখা হয় ref দিয়ে, effect-এর ভেতরে, তাই নিয়ম ভাঙে না।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const items = Array.from({ length: 1000 }, (_, i) => ({ price: (i % 50) + 1 }));

function totalOf(list, off) {
  console.log('  হিসাব চলল, ছাড়', off);
  return list.reduce((sum, p) => sum + p.price, 0) - off;
}
function Cart() {
  const [off, setOff] = useState(0);
  const [dark, setDark] = useState(false);
  const renders = useRef(0);
  const total = useMemo(() => totalOf(items, off), [off]);
  useEffect(() => {
    renders.current += 1;
    console.log('render নম্বর', renders.current);
  });
  return (
    <div style={{ background: dark ? '#ddd' : '#fff' }}>
      <p>মোট: {total} টাকা</p>
      <button onClick={() => setDark(!dark)}>রং বদলান</button>
      <button onClick={() => setOff(off + 10)}>১০ টাকা ছাড়</button>
    </div>
  );
}
createRoot(document.getElementById('root')).render(<Cart />);
</script>

  হিসাব চলল, ছাড় 0
render নম্বর 1
render নম্বর 2
render নম্বর 3
  হিসাব চলল, ছাড় 10
render নম্বর 4

কখন লাভ, হিসাব করে

ধরুন একটি হিসাবে ৮ ms লাগে। একটি সেশনে component ১০০ বার render হলো, আর প্রথম render-সহ মোট ৫ বার নির্ভরতা নতুন ছিল, অর্থাৎ হিসাব সত্যিই লাগল ৫ বার।

• useMemo ছাড়া: ১০০ × ৮ = ৮০০ ms.
• useMemo সহ: ৫ × ৮ = ৪০ ms, সাথে ১০০ বার মেলানোর সামান্য খরচ।
• Cache hit rate = (১০০ − ৫) ÷ ১০০ = ৯৫%. বেঁচেছে ৭৬০ ms.

এবার উল্টো দিক। নিজের কম্পিউটারে একটি filter আর reduce মেপেছিলাম। এটি Node 24-এ এক স্থানীয় run, সাধারণ ফল নয়: ১০০ পণ্যে প্রায় ০.০০৪ ms, ১০,০০০ পণ্যে প্রায় ০.১৫ ms, ১০ লাখে প্রায় ১৭ ms. অর্থাৎ বেশিরভাগ তালিকায় হিসাবটি এত সস্তা যে জমিয়ে রাখার লাভ চোখে পড়ে না। React-এর docs একটি ব্যবহারিক মাপ দেয়: console.time দিয়ে মেপে হিসাব মোট প্রায় ১ ms বা তার বেশি হলে তবেই ভাবুন। ধীর ফোনের কথাও মাথায় রাখুন, CPU throttling দিয়ে মাপুন।

useCallback আসলে কী

Component-এর ভেতরে লেখা function প্রতি render-এ নতুন হয়। useCallback সেই function-টিই জমা রাখে, তাকে চালায় না। useCallback(fn, deps) হুবহু useMemo(() => fn, deps)-এর সমান। নিজে থেকে এটি কিছুই দ্রুত করে না। লাভ হয় তখনই, যখন function-টি কোথাও মিলিয়ে দেখা হয়।

৫ · React Compiler — হাতের memo কি বিদায়?

React Compiler একটি build-সময়ের টুল। আপনার component পড়ে সে নিজেই ঠিক করে কী জমা রাখবে, আর সেই কোড বসিয়ে দেয়। ৭ অক্টোবর ২০২৫-এ এর প্রথম stable version 1.0 আসে। React 17 ও তার পরের version-এ চলে। লেখার সময়ে babel-plugin-react-compiler-এর latest হলো 1.0.0. সাধারণত এটি build-এ আলাদা করে যোগ করতে হয়।

কিন্তু সে আসলে কী করে? পড়ে নয়, চালিয়ে দেখা যাক। সত্যিকারের run, compiler 1.0.0, Babel 7.29.7:

export function CartTotal({ items, off }) {
  const total = items.reduce((sum, p) => sum + p.price, 0) - off;
  return <p>মোট: {total} টাকা</p>;
}

import { c as _c } from "react/compiler-runtime";
export function CartTotal(t0) {
  const $ = _c(2);
  const { items, off } = t0;
  const total = items.reduce(_temp, 0) - off;
  let t1;
  if ($[0] !== total) {
    t1 = <p>মোট: {total} টাকা</p>;
    $[0] = total;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  return t1;
}

দুটি জিনিস লক্ষ করুন। প্রথমত, $ একটি জমা রাখার array, যেটি নিজেও একটি hook থেকে আসে। অর্থাৎ compiler-ও সেই খাতার ধারণাই ব্যবহার করে। দ্বিতীয়ত, রঙিন লাইনটি। reduce-এর হিসাব জমা হয়নি, প্রতি render-এ চলবে। জমা হয়েছে শুধু JSX. কারণ ফলটি একটি সংখ্যা। একই compiler-এ items.filter(...) চালিয়ে দেখলাম, সেখানে array-টি items আর off-এর ওপর জমা হয়। তাই “compiler আছে মানে সব ধীর হিসাব বাঁচল”, এই কথা অন্তত এই run-এ সত্য নয়।

৬ · আরও চারটি hook, সংক্ষেপে — useId, useDeferredValue, useTransition, use

useId একটি স্থায়ী, অনন্য id দেয়। মূল কাজ label আর input বা aria-describedby জোড়া লাগানো। হাতে id="qty" লিখলে একই component দুবার বসালে id দুটি মিলে যায়। সত্যিকারের run-এ React 19.3.1 দুটি ডাকে দিয়েছে _r_0_ আর _r_1_, কিন্তু এই আকৃতির ওপর ভরসা করবেন না, version ভেদে বদলেছে। List-এর key হিসেবে এটি ব্যবহার করবেন না, key আসে ডেটা থেকে (পর্ব ১১)।

function QtyField() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>পরিমাণ</label>
      <input id={id} type="number" />
    </>
  );
}

useDeferredValue আর useTransition একই সমস্যার দুই হাতল। সমস্যাটি হলো, ভারী render টাইপ করা আটকে দেয়। সমাধান: জরুরি কাজ (অক্ষর পর্দায় বসা) আগে, ভারী কাজ পরে, আর নতুন অক্ষর এলে ভারী কাজ থামিয়ে আবার শুরু।

const [text, setText] = useState("");      // input: জরুরি
const deferred = useDeferredValue(text);   // তালিকা: পরে
// <SlowList query={deferred} />  SlowList-কে memo করতে হয়

const [isPending, startTransition] = useTransition();
function selectTab(next) {
  startTransition(() => setTab(next));     // ভারী ট্যাব বদল
}

একটি ফাঁদ: controlled input-এর state transition-এর ভেতরে বদলানো যায় না, কারণ টাইপ করা তাৎক্ষণিক হতে হয়। Input-এর জন্য এক state, ভারী অংশের জন্য আরেকটি রাখুন, অথবা useDeferredValue নিন। memo ছাড়া useDeferredValue-এর লাভ পাওয়া যায় না, কারণ parent-এর render-এ child এমনিই render হয়। এই hook দুটি React 18-এ (মার্চ ২০২২) আসে, বিস্তারিত পর্ব ২৩-এ।

use এসেছে React 19-এ (ডিসেম্বর ২০২৪)। এটি render-এর সময় একটি Promise বা context-এর মান পড়ে। React-এর docs স্পষ্ট বলে, নামে use হলেও এটি hook নয়, তাই একে if আর লুপের ভেতরে ডাকা যায়। Rules of Hooks-এর এটিই ব্যতিক্রম। তবে এটি try/catch-এ ডাকা যায় না। Promise pending থাকলে component থেমে নিকটতম Suspense-এর fallback দেখায়, reject হলে error boundary ধরে।

function Reviews({ reviewsPromise, show }) {
  if (!show) return null;
  const reviews = use(reviewsPromise);     // শর্তের পরেও চলে
  return <ul>{reviews.map((r) => <li key={r.id}>{r.text}</li>)}</ul>;
}
// ভুল: use(fetch("/api/reviews")), প্রতি render-এ নতুন Promise

৭ · নিজের hook লেখা — logic ভাগ, state নয়

পর্ব ১৩-এ effect দিয়ে অনেক কিছু করেছেন। একই effect-এর ধাঁচ তিন জায়গায় দেখলে সেটি একটি function-এ তুলে নেওয়া যায়। যে function নিজে hook ডাকে, তার নাম use দিয়ে শুরু করলেই সে custom hook. আলাদা কোনো syntax নেই।

Custom hook চলার সময় যেন আলাদা কিছু নয়। তার ভেতরের hook ডাকগুলো সরাসরি যে component ডেকেছে তার খাতায় ঘর পায়। নিচের stepper-এ useCounter-কে দুবার ডেকে দেখুন।

1function useCounter(start) {2  const [n, setN] = useState(start);3  return [n, () => setN(n + 1)];4}5function Cart() {6  const [a, incA] = useCounter(1);7  const [b, incB] = useCounter(5);8  // বোতাম: onClick={incA}9}

৮ · বাজারঘরের দুটি hook — useDebounce আর useLocalStorage

বাজারঘরের খোঁজার ঘরে প্রতিটি অক্ষরে server-এ request গেলে অপচয়। Debounce মানে টাইপ থামার কিছুক্ষণ পরে তবে কাজ করা। লিফটের দরজার মতো: কেউ ঢুকলেই দরজা বন্ধের সময় আবার গোড়া থেকে শুরু। শেষজন ঢোকার পরেই দরজা বন্ধ হয়। পর্ব ১৩-এর cleanup এখানে আসল কারিগর।

1function useDebounce(value, delay) {2  const [late, setLate] = useState(value);3  useEffect(() => {4    const id = setTimeout(() => setLate(value), delay);5    return () => clearTimeout(id);6  }, [value, delay]);7  return late;8}

হিসাব: ১০ অক্ষর, প্রতিটির ফাঁক ১২০ ms, delay ৩০০ ms. ফাঁক delay-এর চেয়ে ছোট, তাই প্রতিটি timer বাতিল হয়, শুধু শেষটি বাজে। Request ১০টির বদলে ১টি, যা যায় ৯ × ১২০ + ৩০০ = ১৩৮০ ms-এ। খরচ একটাই: শেষ অক্ষরের পরে ৩০০ ms অপেক্ষা। Delay বেশি বাড়ালে খোঁজা ধীর লাগে।

এবার মনে রাখার পালা। ব্যবহারকারী শেষ খোঁজা ফিরে এলেও দেখতে চান, তাই ব্রাউজারের localStorage. কিন্তু এই পাতার preview একটি sandbox-করা iframe-এ চলে, যেখানে localStorage ছুঁলেই error হয়। বাস্তবেও এমন হয়: কিছু প্রাইভেট মোড বা কড়া সেটিংসে storage বন্ধ বা ভরা থাকতে পারে। তাই কোডটি আগে পরীক্ষা করে, না পেলে memory-তে রাখে। নিচের ঘরে টাইপ করে দেখুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
let store;
try { localStorage.setItem('t', '1'); localStorage.removeItem('t'); store = localStorage; }
catch { const m = new Map(); console.log('localStorage বন্ধ, memory নিলাম');
  store = { getItem: (k) => m.get(k) ?? null, setItem: (k, v) => m.set(k, v) }; }
function useStoredText(key, first) {
  const [text, setText] = useState(() => store.getItem(key) ?? first);
  useEffect(() => { store.setItem(key, text); }, [key, text]);
  return [text, setText];
}
function useDebounce(value, delay) {
  const [late, setLate] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setLate(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return late;
}
const products = ['চাল', 'ডাল', 'চা পাতা', 'চিনি', 'আটা'];
function Search() {
  const [q, setQ] = useStoredText('bazar-q', 'চ');
  const late = useDebounce(q, 300);
  useEffect(() => { console.log('খোঁজ চলল:', late); }, [late]);
  return <><input value={q} onChange={(e) => setQ(e.target.value)} />
    <p>{products.filter((p) => p.includes(late)).join(', ') || 'কিছু নেই'}</p></>;
}
createRoot(document.getElementById('root')).render(<Search />);
</script>

localStorage বন্ধ, memory নিলাম
খোঁজ চলল: চ

বাজারঘরের আসল কোডে শুধু লেখা নয়, object-ও রাখতে হয়। তাই hook-টি JSON সামলায়, আর storage বন্ধ বা জমা মান নষ্ট থাকলে শুরুর মানে ফিরে যায়।

function readJson(key, fallback) {
  try {
    const raw = window.localStorage.getItem(key);
    return raw === null ? fallback : JSON.parse(raw);
  } catch {
    return fallback;   // storage বন্ধ, অথবা JSON নষ্ট
  }
}

export function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => readJson(key, initial));
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch {
      // storage ভরা বা বন্ধ: মান তবু memory-তে থাকে
    }
  }, [key, value]);
  return [value, setValue];
}

৯ · useFetch সাবধানে, আর লিন্টার দিয়ে পাহারা

Data আনার hook সবচেয়ে বেশি লেখা হয়, ভুলও হয় সবচেয়ে বেশি। ব্যবহারকারী “চ” লিখলেন, request গেল। তারপর “চা” লিখলেন, আরেকটি গেল। দ্বিতীয় উত্তর আগে এলো, প্রথমটি পরে। পরে যেটি এলো, সেটিই পর্দায় বসল। এটি race condition. দুটি নকল server-উত্তর দিয়ে সত্যিকারের পরীক্ষা (React 19.3.1, jsdom): c-এর উত্তর ধীর, ch-এর দ্রুত।

naive
  server answered q=ch
  server answered q=c
  screen: box q=ch, data=results for c
safe
  aborted q=c
  server answered q=ch
  screen: box q=ch, data=results for ch

সাধারণ সংস্করণে খোঁজার ঘরে ch, অথচ ফল c-এর। নিরাপদ সংস্করণ নিচে। AbortController পুরোনো request বাতিল করে। আর ফলের সাথে তার url রাখা হয়েছে, তাই loading আলাদা state নয়, হিসাব থেকে আসে।

export function useFetch(url) {
  const [result, setResult] = useState({ url: null, data: null, error: null });

  useEffect(() => {
    const controller = new AbortController();
    fetch(url, { signal: controller.signal })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then((data) => setResult({ url, data, error: null }))
      .catch((error) => {
        if (error.name !== "AbortError") setResult({ url, data: null, error });
      });
    return () => controller.abort();          // cleanup: পুরোনো request বাতিল
  }, [url]);

  const loading = result.url !== url;         // এই url-এর ফল এখনো আসেনি
  return {
    loading,
    data: loading ? null : result.data,
    error: loading ? null : result.error,
  };
}

তবু এটিকে পূর্ণ সমাধান ভাববেন না। এতে cache নেই, একই ডেটার দুই component দুবার request পাঠায়, retry নেই। বড় অ্যাপে TanStack Query (পর্ব ১৯), router loader (পর্ব ২০) বা framework-এর data layer (পর্ব ৫৩) ব্যবহার করা হয়। React docs-ও অ্যাপের ভেতরে হাতে লেখা fetching-এর বদলে এমন পথই পছন্দ করে।

eslint-plugin-react-hooks, সত্যিকারের run

পর্ব ০৫-এ ESLint-এর পরিবেশ বানিয়েছেন। এবার তাতে React hook-এর নিয়ম যোগ করি। লেখার সময়ে version: ESLint 10.14.0, eslint-plugin-react-hooks 7.1.1, Node 24.15.0. এই plugin-এর recommended দলে এখন ১৬টি rule, যার বেশিরভাগ React Compiler-এর পরীক্ষা থেকে আসে। Compiler ব্যবহার না করলেও এগুলো কাজ করে।

npm i -D eslint eslint-plugin-react-hooks globals

import reactHooks from "eslint-plugin-react-hooks";
import globals from "globals";

export default [
  {
    files: ["src/**/*.jsx"],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      globals: globals.browser,
      parserOptions: { ecmaFeatures: { jsx: true } },
    },
  },
  reactHooks.configs.flat.recommended,
];

এবার ইচ্ছা করে ভুলে ভরা একটি component:

import { useEffect, useRef, useState } from "react";

// ইচ্ছা করে চারটি ভুল: লিন্টার কী বলে দেখার জন্য
export function ProductCard({ product, onSale }) {
  if (!product) {
    return null;
  }
  const [qty, setQty] = useState(1);

  if (onSale) {
    useEffect(() => {
      document.title = "ছাড় চলছে";
    }, []);
  }

  const renders = useRef(0);
  renders.current = renders.current + 1;

  useEffect(() => {
    console.log(product.name, qty);
  }, []);

  return (
    <button onClick={() => setQty(qty + 1)}>
      {product.name}: {qty}
    </button>
  );
}

সত্যিকারের run. লম্বা বার্তা ছোট করেছি, “…” মানে বাদ দেওয়া অংশ।

$ npx eslint src

~/bazarghar/src/ProductCard.jsx
   8:25  error    React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render   react-hooks/rules-of-hooks
  11:5   error    React Hook "useEffect" is called conditionally. … Did you accidentally call a React Hook after an early return?   react-hooks/rules-of-hooks
  16:19  error    React Hook "useRef" is called conditionally. …   react-hooks/rules-of-hooks
  17:3   error    Error: Cannot access refs during render … Cannot update ref during render   react-hooks/refs
  17:21  error    Error: Cannot access refs during render … Cannot access ref value during render   react-hooks/refs
  19:3   error    React Hook "useEffect" is called conditionally. …   react-hooks/rules-of-hooks
  21:6   warning  React Hook useEffect has missing dependencies: 'product.name' and 'qty'. Either include them or remove the dependency array   react-hooks/exhaustive-deps

✖ 7 problems (6 errors, 1 warning)

প্রথম error-টি লক্ষ করুন। useState-এর আগে কোনো if নেই, কিন্তু একটি early return আছে। লিন্টার বুঝেছে, ওই return-এর কারণে পরের সব hook শর্তাধীন। ওপরের “চুপচাপ অদলবদল” ভুলটিও এই নিয়মেই ধরা পড়ে। সব hook ওপরে তুলে, শর্ত ভেতরে নিয়ে, ref effect-এ লিখে, dependency পূরণ করে আবার চালালে কোনো problem থাকে না, exit code 0.

আর সাধারণ useFetch? প্রচলিত ধাঁচে effect-এর শুরুতে setLoading(true) লিখলে এই version-এর plugin সরাসরি error দেয়। সত্যিকারের run:

~/bazarghar/src/NaiveFetch.jsx
  8:5  error  Error: Calling setState synchronously within an effect can trigger cascading renders
…
>  8 |     setLoading(true);
     |     ^^^^^^^^^^ Avoid calling setState() directly within an effect
  react-hooks/set-state-in-effect

✖ 1 problem (1 error, 0 warnings)

এজন্যই ওপরের useFetch-এ loading হিসাব করে বের করা হয়েছে। সেই ফাইল, useDebounce আর useLocalStorage, তিনটিতেই একই লিন্টার 0 problem দিয়েছে। exhaustive-deps সতর্কবার্তা মুছতে // eslint-disable লিখবেন না। সেটি বাগ ঢেকে রাখে। পড়ুন, তারপর dependency ঠিক করুন, অথবা React 19.2-তে আসা useEffectEvent কাজে লাগে কি না ভাবুন।

১০ · AI-এর যুগে — hook-এর কোড চলছে মানেই ঠিক নয়

Hook-এর ভুলের বিশেষত্ব হলো, সাধারণ পরীক্ষায় তা দেখা যায় না। দ্রুত নেটওয়ার্কে race ধরা পড়ে না, আর ছোট ডেটায় বাড়তি render চোখে পড়ে না। AI-এর কোড তাই আরও সাবধানে দেখতে হয়।

AI-এর লেখা hook হাতে পেলে — যাচাইয়ের চেকলিস্ট

• eslint-plugin-react-hooks চালিয়েছি, একটিও error বা eslint-disable নেই
• Effect থাকলে cleanup পড়েছি, আর ধীর নেটওয়ার্কে দ্রুত বদলে দেখেছি
• প্রতিটি useMemo-র কারণ বলতে পারি, না পারলে সরিয়ে মেপেছি
• Hook-টি দুটি component-এ বসিয়ে দেখেছি, state আলাদা আছে
• কোনো package থাকলে নাম আর version npm view-এ মিলিয়েছি, API আমার version-এর docs-এ পড়েছি
• কোনো গোপন মান client-এ বা localStorage-এ যায়নি