रिएक्ट हुक को कैसे ठीक करें, उपयोगस्टेट को सशर्त त्रुटि कहा जाता है

त्रुटिरिएक्ट हुक “यूज़स्टेट” को सशर्त रूप से कहा जाता है। प्रत्येक घटक रेंडरमें रिएक्ट हुक को बिल्कुल उसी क्रम में बुलाया जाना चाहिए सबसे आम रिएक्ट गलतियों में से एक है। यह हुक्स के नियमों का उल्लंघन करता है। यहां बताया गया है कि ऐसा क्यों होता है और प्रत्येक प्रकार को कैसे ठीक किया जाए।

यह नियम क्यों अस्तित्व में है

रिएक्ट उनकेद्वारा हुक ट्रैक करता है कॉल ऑर्डर, नाम से नहीं. प्रत्येक रेंडर पर, रिएक्ट एक ही क्रम में समान हुक की अपेक्षा करता है। यदि कोई हुक किसी शर्त के अंदर है, तो यह एक रेंडर पर चल सकता है, लेकिन अगले पर नहीं – रिएक्ट की आंतरिक ट्रैकिंग को तोड़ता है और राज्य को गलत हुक को सौंपा जाता है।

टूटा हुआ कोड

// 🐛 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. केवल रिएक्ट फ़ंक्शंस से हुक कॉल करें – प्रतिक्रिया घटक या कस्टम हुक ( से शुरू होने वाले फ़ंक्शन)। नियमित JavaScript फ़ंक्शंस से नहीं.useसशर्त तर्क को सही ढंग से संभालना

ESLint

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 />;
}

के साथ नियम लागू करें अक्सर पूछे जाने वाले प्रश्न

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"
  }
}

प्रश्न: हुक सशर्त क्यों नहीं हो सकते? यह मनमाना लगता है.

ए: रिएक्ट हुक को उनके कॉल ऑर्डर (पहला यूज़स्टेट, दूसरा यूज़स्टेट, आदि) से पहचानता है, नाम से नहीं। यदि कभी-कभी कोई हुक छोड़ दिया जाता है, तो ऑर्डर बदल जाता है और रिएक्ट गलत हुक को स्थिति निर्दिष्ट कर देता है। सुसंगत क्रम वह है जो हुक को काम करता है।
प्रश्न: क्या मैं हुक के अंदर शर्तों का उपयोग कर सकता हूँ?

उत्तर: हाँ! हुक के अंदर स्थितियाँ (उदाहरण के लिए, यूज़इफ़ेक्ट कॉलबैक के अंदर) ठीक हैं। नियम केवल सशर्त रूप से हुक को कॉल करने से मना करता है।
प्रश्न: मैं सशर्त रूप से प्रभाव कैसे चला सकता हूँ?

ए: शर्त को प्रभाव निकाय के अंदर रखें और शर्त चर को निर्भरता सरणी में शामिल करें:
प्रश्न: सशर्त प्रतिपादन के बारे में क्या – क्या इसकी अनुमति है?useEffect(() => { if (cond) {...} }, [cond]).

उत्तर: हाँ. सशर्त प्रतिपादन (स्थिति के आधार पर अलग-अलग JSX लौटाना) पूरी तरह से ठीक है, जब तक कि किसी भी सशर्त वापसी से पहले सभी हुक बुलाए जाते हैं। रेंडरिंग स्थितियाँ हुक स्थितियाँ नहीं हैं।
प्रश्न: क्या मैं कस्टम हुक को सशर्त रूप से कॉल कर सकता हूँ?

उ: नहीं – कस्टम हुक समान नियमों का पालन करते हैं क्योंकि वे आंतरिक रूप से हुक कहते हैं। उन्हें शीर्ष स्तर पर बिना शर्त बुलाएं और उनके अंदर शर्तें रखें.
निष्कर्ष

“रिएक्ट हुक को सशर्त रूप से कहा जाता है” त्रुटि का अर्थ है कि एक हुक एक स्थिति, लूप के अंदर है, या जल्दी वापसी के बाद है। फिक्स हमेशा एक ही होता है:

किसी भी सशर्त रिटर्न या तर्क से पहले, अपने घटक के शीर्ष पर सभी हुक को बिना शर्त कॉल करें. शर्तों को हुक के अंदर (प्रभाव वाले शरीर में) रखें, उनके आसपास नहीं। स्थापित करें रनटाइम तक पहुंचने से पहले इन गलतियों को स्वचालित रूप से पकड़ना – यह हुक नियम के उल्लंघन के खिलाफ सबसे अच्छा बचाव है।eslint-plugin-react-hooks रनटाइम तक पहुंचने से पहले इन गलतियों को स्वचालित रूप से पकड़ना – यह हुक नियम के उल्लंघन के खिलाफ सबसे अच्छा बचाव है।