Can You Use React Hooks Inside Loops or Conditions? Here’s Why Not

⚠️ Can I Use React Hooks Inside Loops or Conditions?

Short answer: ❌ No, you can’t use React hooks inside loops, conditions, or nested functions.

If you do, you'll likely see this dreaded error:

React has detected a violation of the Rules of Hooks.

Let’s explore why this happens, what the official rules say, and how to fix it properly.

📜 The Rules of Hooks (by React)

1. Only call hooks at the top level.
2. Only call hooks from React function components or custom hooks.

These rules are strict and enforced by tools like the ESLint plugin for React hooks.

🚫 Why You Can't Use Hooks Inside Loops or Conditions

Hooks rely on the order in which they’re called. If you call a hook conditionally or inside a loop, the order may change on the next render, which breaks React’s internal tracking.

🔁 Example That Will Break

if (isLoggedIn) {
    const [user, setUser] = useState(null); // ❌ Wrong!
}

If isLoggedIn is false on one render and true on the next, useState will be skipped, and React will lose sync, causing weird bugs or crashes.

✅ How to Fix It

Always declare hooks unconditionally at the top level of your component.

✔️ Correct Approach

const [user, setUser] = useState(null);

if (isLoggedIn) {
    // Use the state here conditionally
    return <Dashboard user={user} />;
}

Or use conditional values, not conditional hooks.

🔁 What About Loops?

You also cannot use hooks inside a for or while loop.

❌ This Will Break

for (let i = 0; i < items.length; i++) {
    const [value, setValue] = useState(null); // ❌ Invalid
}

✔️ Correct Alternative

Use a custom hook to manage state in each item, or store them in an array.

🛠️ Real Use Case Fix Example

Instead of

if (someCondition) {
    useEffect(() => {
        // effect
    }, []);
}

// Do:

useEffect(() => {
    if (someCondition) {
        // effect
    }
}, [someCondition]);

✅ Conclusion

• ❌ Don’t call React hooks inside if statements, loops, or nested functions.
• ✅ Always call hooks at the top level of your component or custom hook.
• 🔄 Use conditions inside the hook, not around it.

Following the Rules of Hooks helps React maintain consistent hook order between renders and avoids hard-to-debug issues.

🔍 Tip: Use the official eslint-plugin-react-hooks to catch violations early.