প্রতিক্রিয়ায় সর্বাধিক আপডেটের গভীরতা অতিক্রম করা ত্রুটি কীভাবে ঠিক করবেন

ত্রুটিসর্বাধিক আপডেটের গভীরতা অতিক্রম করেছে৷ এটি ঘটতে পারে যখন একটি কম্পোনেন্ট বারবার কম্পোনেন্ট উইলআপডেট বা কম্পোনেন্টডিডআপডেটের ভিতরে সেটস্টেটকে কল করে (বা একটি useEffect) মানে আপনার উপাদান একটি অসীম রেন্ডার লুপে আটকে আছে। এখানে প্রতিটি কারণ এবং এর সমাধান রয়েছে।

কেন এটা ঘটে

রাষ্ট্র পরিবর্তন হলে প্রতিক্রিয়া পুনরায় রেন্ডার হয়। যদি একটি স্টেট আপডেট একটি রেন্ডার ট্রিগার করে যা অন্য স্টেট আপডেট ট্রিগার করে, আপনি একটি অসীম লুপ পাবেন। প্রতিক্রিয়া এটি শনাক্ত করে এবং আপনার ব্রাউজারকে হিমায়িত হতে বাধা দিতে “সর্বোচ্চ আপডেট গভীরতা অতিক্রম করেছে” ছুড়ে দেয়।

কারণ 1: রেন্ডার/বডিতে সরাসরি সেটস্টেটকে কল করা

// 🐛 setState called during render → triggers re-render → loops forever
function Counter() {
  const [count, setCount] = useState(0);

  setCount(count + 1);  // ❌ runs on every render → infinite loop

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

// ✅ Only update state in event handlers or effects
function Counter() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

কারণ 2: এটি পাস করার পরিবর্তে একটি ফাংশন কল করা

// 🐛 onClick={handleClick()} CALLS handleClick during render
<button onClick={handleClick()}>Click</button>
// If handleClick calls setState, it loops on every render

// ✅ Pass the function reference, don't call it
<button onClick={handleClick}>Click</button>

// ✅ Or wrap in an arrow function if you need to pass arguments
<button onClick={() => handleClick(id)}>Click</button>

কারণ 3: ব্যবহার ইফেক্টের নিজস্ব নির্ভরতা আপডেট করা

// 🐛 Effect sets state that's in its dependency array
function Component() {
  const [data, setData] = useState([]);

  useEffect(() => {
    setData([...data, newItem]);  // ❌ changes data → effect re-runs → loop
  }, [data]);  // depends on data, which the effect changes
}

// ✅ Use a functional update and remove data from deps
function Component() {
  const [data, setData] = useState([]);

  useEffect(() => {
    setData(prev => [...prev, newItem]);  // functional update
  }, []);  // runs once — no dependency on data
}

কারণ 4: অবজেক্ট/অ্যারে/ফাংশন ব্যবহার ইফেক্ট নির্ভরতা

// 🐛 New object reference every render → effect always re-runs
function Component({ userId }) {
  const options = { id: userId };  // NEW object each render

  useEffect(() => {
    fetchData(options);
    setState(...);
  }, [options]);  // options is "new" every render → infinite loop
}

// ✅ Depend on the primitive value, or memoize the object
function Component({ userId }) {
  useEffect(() => {
    fetchData({ id: userId });
    setState(...);
  }, [userId]);  // primitive — stable across renders

  // OR memoize:
  const options = useMemo(() => ({ id: userId }), [userId]);
}

কারণ 5: একটি ইভেন্ট হ্যান্ডলারে স্টেট সেট করা যা রেন্ডারে আগুন দেয়

// 🐛 onChange fires and setState causes re-render, which re-triggers...
// often from passing changing props to controlled components incorrectly

// 🐛 Also common: updating parent state that re-renders and resets child
function Parent() {
  const [value, setValue] = useState('');
  return <Child onValueChange={setValue(newValue)} />;  // ❌ called in render
}

// ✅ Pass the setter reference
function Parent() {
  const [value, setValue] = useState('');
  return <Child onValueChange={setValue} />;  // pass reference
}

কিভাবে লুপ ডিবাগ করবেন

// 1. Add a log to see how often the component renders
function Component() {
  console.log('render');  // if this floods the console, you have a loop
  // ...
}

// 2. Log inside the effect to find the culprit
useEffect(() => {
  console.log('effect running');
  // ...
}, [dep1, dep2]);

// 3. Log each dependency to see which one keeps changing
useEffect(() => {
  console.log('dep1:', dep1, 'dep2:', dep2);
}, [dep1, dep2]);

// 4. The React DevTools Profiler highlights components re-rendering rapidly

সুবর্ণ নিয়ম

1. কম্পোনেন্ট বডিতে সেটস্টেটকে কখনই সরাসরি কল করবেন না — শুধুমাত্র ইভেন্ট হ্যান্ডলার, প্রভাব, বা কলব্যাকে
2. ইভেন্ট হ্যান্ডলারদের ফাংশন রেফারেন্স পাস করুন, তাদের কল করবেন না (onClick={fn}নাonClick={fn()})
3. কার্যকরী আপডেট ব্যবহার করুন (setState(prev => ...)) যখন নতুন অবস্থা পুরানো অবস্থার উপর নির্ভর করে
4. আদিমদের উপর নির্ভর করে useEffect-এ, অথবা useMemo/useCallback-এর সাহায্যে বস্তু/ফাংশন মেমোাইজ করুন
5. একটি useEffect এর deps এ স্টেট রাখবেন না যদি ইফেক্ট সেই অবস্থাটি আপডেট করে

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

প্রশ্ন: এটি এবং “অনেকগুলি রি-রেন্ডার” এর মধ্যে পার্থক্য কী?
উত্তর: তারা ঘনিষ্ঠভাবে সম্পর্কিত — উভয়ই অসীম রেন্ডার লুপ। “অনেকগুলো রি-রেন্ডার” মানে সাধারণত রেন্ডারের সময় সেটস্টেটকে সরাসরি বলা হয়; “সর্বোচ্চ আপডেটের গভীরতা অতিক্রম করেছে” প্রায়শই লুপ সৃষ্টিকারী একটি useEffect বা জীবনচক্র পদ্ধতির দিকে নির্দেশ করে। সংশোধন ওভারল্যাপ.

প্রশ্ন: কেন সেটস্টেট পাস করলে সরাসরি লুপ হয়?
A: যদি আপনি লেখেনonClick={setState(x)}, যে রেন্ডারের সময় সেটস্টেটকে কল করে (ক্লিকে নয়)। setState একটি রি-রেন্ডার ট্রিগার করে, যা এটিকে আবার বলে — অসীম লুপ। পাসonClick={() => setState(x)} পরিবর্তে

প্রশ্ন: পূর্ববর্তী অবস্থার উপর ভিত্তি করে আমি কীভাবে নিরাপদে অবস্থা আপডেট করব?
উত্তর: একটি কার্যকরী আপডেট ব্যবহার করুন:setCount(prev => prev + 1). এর প্রয়োজন নেইcount আপনার নির্ভরতা অ্যারেতে, একটি সাধারণ লুপ কারণ এড়ানো।

প্রশ্ন: আমার অবজেক্ট নির্ভরতা লুপ সৃষ্টি করে। আমি কি করব?
উত্তর: অবজেক্ট এবং অ্যারে প্রতি রেন্ডারে নতুন রেফারেন্স পায়। হয় তাদের ভিতরের আদিম মানের উপর নির্ভর করুন ([obj.id]নয় ), অথবা বস্তুটিকে[obj]দিয়ে মেমোাইজ করুন প্রশ্নঃ ESLint কি এগুলো ধরতে পারে?useMemo(() => obj, [deps]).

উঃ
exhaustive-deps নিয়ম অনেক নির্ভরতা সমস্যা পতাকাঙ্কিত. এটি প্রতিটি লুপ ধরবে না, তবে এটি সবচেয়ে সাধারণ ব্যবহার ইফেক্ট নির্ভরতা ভুলগুলিকে প্রতিরোধ করে। এটি ইনস্টল করুন এবং সক্ষম করুন।eslint-plugin-react-hooksউপসংহার

“সর্বোচ্চ আপডেটের গভীরতা অতিক্রম করেছে” সর্বদা একটি অসীম রেন্ডার লুপ। সবচেয়ে সাধারণ কারণগুলি: রেন্ডার বডিতে সরাসরি সেটস্টেটকে কল করা, একটি ইভেন্ট হ্যান্ডলারে একটি ফাংশন কল করা (পাস করার পরিবর্তে), একটি useEffect যা তার নিজস্ব নির্ভরতা আপডেট করে, বা অস্থির বস্তু/ফাংশন নির্ভরতা। সংশোধন:

শুধুমাত্র হ্যান্ডলার এবং ইফেক্টে অবস্থা আপডেট করুন, ফাংশন রেফারেন্স পাস করুন, কার্যকরী আপডেট ব্যবহার করুন এবং আদিম বা মেমোাইজড মানের উপর নির্ভর করুন. একটি যোগ করুন লুপটি নিশ্চিত করতে, তারপর কোনটি পরিবর্তন করতে থাকে তা খুঁজে বের করার জন্য প্রতিটি নির্ভরতা লগ করুন — আপনি একবার এটি দেখলে অপরাধী সাধারণত স্পষ্ট হয়।console.log('render') লুপটি নিশ্চিত করতে, তারপর কোনটি পরিবর্তন করতে থাকে তা খুঁজে বের করার জন্য প্রতিটি নির্ভরতা লগ করুন — আপনি একবার এটি দেখলে অপরাধী সাধারণত স্পষ্ট হয়।