प्रतिक्रिया में अधिकतम अद्यतन गहराई से अधिक त्रुटि को कैसे ठीक करें

त्रुटिअधिकतम अद्यतन गहराई पार हो गई. ऐसा तब हो सकता है जब कोई घटक बार-बार कंपोनेंटविलअपडेट या कंपोनेंटडिडअपडेटके अंदर सेटस्टेट को कॉल करता है (या यूज़इफ़ेक्ट में) का अर्थ है कि आपका घटक एक अनंत रेंडर लूप में फंस गया है। यहां हर कारण और उसका समाधान है।

ऐसा क्यों होता है

स्थिति बदलने पर प्रतिक्रिया पुनः प्रस्तुत होती है। यदि कोई राज्य अद्यतन किसी रेंडर को ट्रिगर करता है जो किसी अन्य राज्य अद्यतन को ट्रिगर करता है, तो आपको एक अनंत लूप मिलता है। रिएक्ट इसका पता लगाता है और आपके ब्राउज़र को फ्रीज होने से बचाने के लिए “अधिकतम अपडेट गहराई पार हो गई” फेंकता है।

कारण 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. आदिमों पर निर्भर यूज़इफ़ेक्ट में, या यूज़मेमो/यूज़कॉलबैक
5. के साथ ऑब्जेक्ट/फ़ंक्शन को याद रखें यदि प्रभाव उस स्थिति को अपडेट करता है तो स्टेट को यूज़इफेक्ट के डिप्स में न डालें

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: इसमें और “बहुत अधिक पुन: प्रस्तुतीकरण” के बीच क्या अंतर है?
उ: वे निकट से संबंधित हैं – दोनों अनंत रेंडर लूप हैं। “बहुत सारे री-रेंडर” का आम तौर पर मतलब है कि रेंडर के दौरान सेटस्टेट को सीधे कॉल किया जाता है; “अधिकतम अद्यतन गहराई पार हो गई” अक्सर लूप का कारण बनने वाले उपयोग प्रभाव या जीवनचक्र विधि को इंगित करता है। सुधार ओवरलैप होते हैं.

प्रश्न: सेटस्टेट पास करने से सीधे लूप क्यों बनता है?
उत्तर: यदि आपonClick={setState(x)}लिखते हैं , जो रेंडर के दौरान सेटस्टेट को कॉल करता है (क्लिक पर नहीं)। सेटस्टेट एक री-रेंडर को ट्रिगर करता है, जो इसे फिर से कॉल करता है – अनंत लूप। पासonClick={() => setState(x)} बजाय।

प्रश्न: मैं पिछली स्थिति के आधार पर स्थिति को सुरक्षित रूप से कैसे अपडेट करूं?
ए: एक कार्यात्मक अद्यतन का उपयोग करें:setCount(prev => prev + 1). इसके लिएcountकी आवश्यकता नहीं है आपकी निर्भरता सरणी में, एक सामान्य लूप कारण से बचना।

प्रश्न: मेरी ऑब्जेक्ट निर्भरता लूप का कारण बनती रहती है। मुझे क्या करना?
उत्तर: प्रत्येक रेंडर में ऑब्जेक्ट और ऐरे को नए संदर्भ मिलते हैं। या तो उनके अंदर आदिम मूल्यों पर निर्भर रहें ( नहीं[obj.id]), या ऑब्जेक्ट को[obj]के साथ याद रखें प्रश्न: क्या ईएसलिंट इन्हें पकड़ सकता है?useMemo(() => obj, [deps]).

ए:
एग्जॉस्टिव-डिप्स नियम कई निर्भरता मुद्दों को चिह्नित करता है। यह हर लूप को नहीं पकड़ पाएगा, लेकिन यह सबसे आम उपयोग प्रभाव निर्भरता गलतियों को रोकता है। इसे इंस्टॉल करें और सक्षम करें।eslint-plugin-react-hooksनिष्कर्ष

“अधिकतम अद्यतन गहराई पार हो गई” हमेशा एक अनंत रेंडर लूप होता है। सबसे सामान्य कारण: सीधे रेंडर बॉडी में सेटस्टेट को कॉल करना, इवेंट हैंडलर में एक फ़ंक्शन को कॉल करना (पास करने के बजाय), एक यूज़इफ़ेक्ट जो अपनी निर्भरता को अपडेट करता है, या अस्थिर ऑब्जेक्ट/फ़ंक्शन निर्भरता। समाधान:

केवल हैंडलर और प्रभावों में स्थिति अपडेट करें, फ़ंक्शन संदर्भ पास करें, कार्यात्मक अपडेट का उपयोग करें, और प्राइमेटिव या मेमोइज़्ड मानों पर निर्भर रहें. एकजोड़ें लूप की पुष्टि करने के लिए, फिर प्रत्येक निर्भरता को लॉग करके पता लगाएं कि कौन सी निर्भरता बदलती रहती है – एक बार जब आप इसे देख लेते हैं तो अपराधी आमतौर पर स्पष्ट हो जाता है।console.log('render')जोड़ें लूप की पुष्टि करने के लिए, फिर प्रत्येक निर्भरता को लॉग करके पता लगाएं कि कौन सी निर्भरता बदलती रहती है – एक बार जब आप इसे देख लेते हैं तो अपराधी आमतौर पर स्पष्ट हो जाता है।