কিভাবে প্রতিক্রিয়া হুক ইউজস্টেট ঠিক করবেন শর্তসাপেক্ষে ত্রুটি বলা হয়

ত্রুটিপ্রতিক্রিয়া হুক “useState” বলা হয় শর্তসাপেক্ষে। রিঅ্যাক্ট হুকগুলিকে অবশ্যই প্রতিটি কম্পোনেন্ট রেন্ডারে ঠিক একই ক্রমে কল করতে হবে সবচেয়ে সাধারণ প্রতিক্রিয়া ভুল এক. এটি হুকের নিয়ম লঙ্ঘন করে। কেন এটি ঘটে এবং কীভাবে প্রতিটি বৈকল্পিক ঠিক করা যায় তা এখানে।

কেন এই নিয়ম বিদ্যমান

তাদেরদ্বারা ট্র্যাক হুক প্রতিক্রিয়া কল অর্ডার, নামে নয়। প্রতিটি রেন্ডারে, প্রতিক্রিয়া একই ক্রমানুসারে একই হুক আশা করে। যদি একটি হুক একটি কন্ডিশনের মধ্যে থাকে, তবে এটি একটি রেন্ডারে চলতে পারে কিন্তু পরবর্তীতে নয় – প্রতিক্রিয়ার অভ্যন্তরীণ ট্র্যাকিংকে ভঙ্গ করে এবং ভুল হুকে রাজ্যকে বরাদ্দ করা হয়।

ব্রোকেন কোড

// 🐛 Hook inside a condition — VIOLATES rules of hooks
function Profile({ userId }) {
  if (!userId) {
    return <div>No user</div>;  // early return BEFORE hooks
  }

  const [user, setUser] = useState(null);  // ❌ conditionally called
  // If userId is falsy, this hook is skipped — breaks React's tracking

  return <div>{user?.name}</div>;
}

ফিক্স 1: হুককে প্রথমে কল করুন, পরে কন্ডিশন করুন

// ✅ All hooks at the top, unconditionally
function Profile({ userId }) {
  const [user, setUser] = useState(null);  // always called

  // Conditional logic AFTER all hooks
  if (!userId) {
    return <div>No user</div>;
  }

  return <div>{user?.name}</div>;
}

ফিক্স 2: কন্ডিশন ব্লকের ভিতরে হুক

// 🐛 useEffect inside an if
function Component({ isActive }) {
  if (isActive) {
    useEffect(() => {          // ❌ conditional hook
      console.log('active');
    }, []);
  }
}

// ✅ Move the condition INSIDE the hook
function Component({ isActive }) {
  useEffect(() => {
    if (isActive) {            // condition inside the hook
      console.log('active');
    }
  }, [isActive]);
}

ফিক্স 3: লুপের ভিতরে হুক

// 🐛 Hook in a loop — order changes if items.length changes
function List({ items }) {
  return items.map(item => {
    const [selected, setSelected] = useState(false);  // ❌ in a loop
    return <Item key={item.id} />;
  });
}

// ✅ Extract into a child component — each has its own hooks
function List({ items }) {
  return items.map(item => <Item key={item.id} item={item} />);
}

function Item({ item }) {
  const [selected, setSelected] = useState(false);  // ✅ top level of component
  return <div onClick={() => setSelected(!selected)}>{item.name}</div>;
}

ফিক্স 4: একটি প্রাথমিক প্রত্যাবর্তনের পরে হুক

// 🐛 Hook after a conditional return
function Widget({ data }) {
  const [count, setCount] = useState(0);

  if (!data) return null;      // early return

  const [name, setName] = useState('');  // ❌ never reached when !data

  return <div>{name}: {count}</div>;
}

// ✅ ALL hooks before ANY conditional return
function Widget({ data }) {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');  // moved up

  if (!data) return null;      // early return AFTER all hooks

  return <div>{name}: {count}</div>;
}

হুকের দুই নিয়ম

1. শুধুমাত্র শীর্ষ স্তরে হুক কল করুন — কখনই কন্ডিশন, লুপ বা নেস্টেড ফাংশনের ভিতরে নয়। সবসময় একই ক্রমে।
2. শুধুমাত্র প্রতিক্রিয়া ফাংশন থেকে হুক কল করুন — প্রতিক্রিয়া উপাদান বা কাস্টম হুক (useদিয়ে শুরু হওয়া ফাংশন)। নিয়মিত জাভাস্ক্রিপ্ট ফাংশন থেকে নয়।

শর্তযুক্ত যুক্তি সঠিকভাবে পরিচালনা করা

function Dashboard({ user, showStats }) {
  // ✅ Always call all hooks unconditionally
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Conditions go INSIDE the hook, not around it
    if (showStats) {
      fetchStats().then(setData).finally(() => setLoading(false));
    } else {
      setLoading(false);
    }
  }, [showStats]);

  // Conditional RENDERING is fine — it's not a conditional hook
  if (!user) return <Login />;
  if (loading) return <Spinner />;

  return showStats ? <Stats data={data} /> : <Overview />;
}

ESLint এর সাথে নিয়ম প্রয়োগ করুন

npm install --save-dev eslint-plugin-react-hooks

// .eslintrc — catches these errors before runtime
{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

প্রায়শই জিজ্ঞাসিত প্রশ্ন

প্রশ্ন: কেন হুক শর্তসাপেক্ষ হতে পারে না? এটা নির্বিচারে মনে হয়.
উত্তর: প্রতিক্রিয়া হুককে তাদের কল অর্ডার (প্রথম ইউজ স্টেট, দ্বিতীয় ইউজ স্টেট, ইত্যাদি) দ্বারা চিহ্নিত করে, নামের দ্বারা নয়। যদি কখনও কখনও একটি হুক বাদ দেওয়া হয়, তাহলে অর্ডারটি স্থানান্তরিত হয় এবং প্রতিক্রিয়া ভুল হুকে রাজ্য নির্ধারণ করে। সামঞ্জস্যপূর্ণ ক্রম যা হুক কাজ করে তোলে.

প্রশ্ন: আমি কি হুকের ভিতরে শর্তগুলি ব্যবহার করতে পারি?
উঃ হ্যাঁ! একটি হুকের ভিতরের শর্তগুলি (উদাহরণস্বরূপ, ইফেক্ট কলব্যাকের ভিতরে) ঠিক আছে। নিয়মটি শুধুমাত্র শর্তসাপেক্ষে হুক নিজেই কল করতে নিষেধ করে।

প্রশ্ন: আমি কিভাবে শর্তসাপেক্ষে একটি প্রভাব চালাতে পারি?
A: কন্ডিশনটিকে ইফেক্ট বডির ভিতরে রাখুন এবং ডিপেন্ডেন্সি অ্যারেতে কন্ডিশন ভেরিয়েবল অন্তর্ভুক্ত করুন:useEffect(() => { if (cond) {...} }, [cond]).

প্রশ্ন: শর্তসাপেক্ষ রেন্ডারিং সম্পর্কে কী – এটি অনুমোদিত?
উঃ হ্যাঁ। শর্তসাপেক্ষ রেন্ডারিং (রাজ্যের উপর ভিত্তি করে বিভিন্ন JSX ফেরত দেওয়া) সম্পূর্ণ ঠিক আছে, যতক্ষণ না কোনো শর্তসাপেক্ষ রিটার্নের আগে সমস্ত হুক কল করা হয়। রেন্ডারিং শর্ত হুক শর্ত নয়.

প্রশ্নঃ আমি কি শর্তসাপেক্ষে একটি কাস্টম হুক কল করতে পারি?
উত্তর: না — কাস্টম হুকগুলি একই নিয়ম অনুসরণ করে যেহেতু তারা অভ্যন্তরীণভাবে হুককে ডাকে। তাদের নিঃশর্তভাবে শীর্ষ স্তরে ডাকুন এবং তাদের ভিতরে শর্ত রাখুন।

উপসংহার

“প্রতিক্রিয়া হুক বলা হয় শর্তসাপেক্ষে” ত্রুটি মানে একটি হুক একটি শর্ত, লুপ, বা একটি তাড়াতাড়ি ফিরে আসার পরে আছে। ফিক্স সবসময় একই:কোনো শর্তসাপেক্ষ রিটার্ন বা যুক্তির আগে আপনার কম্পোনেন্টের শীর্ষে নিঃশর্তভাবে সমস্ত হুক কল করুন. তাদের চারপাশে নয়, হুকগুলির ভিতরে (এফেক্ট বডিতে) শর্ত রাখুন৷ ইনস্টল করুনeslint-plugin-react-hooks রানটাইমে পৌঁছানোর আগে এই ভুলগুলি স্বয়ংক্রিয়ভাবে ধরা – এটি হুক নিয়ম লঙ্ঘনের বিরুদ্ধে একক সেরা সুরক্ষা।