📏 Rules of Hooks — Using Hooks Correctly

There are two essential rules for using Hooks. Following these rules ensures Hooks work correctly and your components behave predictably.

🎯 Rule 1: Only Call Hooks at the Top Level

Never call Hooks inside loops, conditions, or nested functions. Always call them at the top level of your function component or custom Hook. This ensures Hooks are called in the same order every render.

React relies on the order of Hook calls to maintain state correctly. If you call Hooks conditionally, the order changes between renders, causing bugs.

import { useState } from 'react';

// ❌ WRONG: Calling Hook inside a condition
function BadComponent() {
  if (true) {
    const [count, setCount] = useState(0); // Don't do this!
  }
}

// ✅ CORRECT: Call Hook at top level
function GoodComponent() {
  const [count, setCount] = useState(0); // Always at top level
  
  if (count > 5) {
    return <p>Count is high!</p>;
  }
  
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

<details>

<summary>📚 More Examples</summary>

// Example: Wrong ways to use Hooks

// ❌ WRONG: In a loop
function BadLoop() {
  for (let i = 0; i < 5; i++) {
    const [value, setValue] = useState(0); // Wrong!
  }
}

// ❌ WRONG: In a callback
function BadCallback() {
  const handleClick = () => {
    const [value, setValue] = useState(0); // Wrong!
  };
}

// ✅ CORRECT: All at the top
function GoodExample() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  
  const handleClick = () => {
    setCount(count + 1); // Use Hooks, don't declare them
  };
  
  return <button onClick={handleClick}>Click</button>;
}

</details>

💡 Rule 2: Only Call Hooks from React Components

Hooks must be called from functional React components or custom Hooks, not from regular JavaScript functions. This ensures Hooks have access to React's internal state management.

import { useState } from 'react';

// ❌ WRONG: Calling Hook from regular function
function regularFunction() {
  const [count, setCount] = useState(0); // Error!
}

// ✅ CORRECT: Calling Hook from component
function MyComponent() {
  const [count, setCount] = useState(0);
  return <p>{count}</p>;
}

// ✅ CORRECT: Calling Hook from custom Hook
function useCustomCounter() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}

<details>

<summary>📚 More Examples</summary>

// Example: Valid places to call Hooks

// ✅ In a functional component
function Component() {
  const [state, setState] = useState(0);
  return <div>{state}</div>;
}

// ✅ In a custom Hook
function useCustomLogic() {
  const [value, setValue] = useState(0);
  return value;
}

// ✅ Used in another component
function AppUsingCustomHook() {
  const value = useCustomLogic();
  return <p>{value}</p>;
}

</details>

📊 Summary

🔑 Key Takeaways

• ✅ Always call Hooks at the top level of functions

• ✅ Never call Hooks conditionally or in loops

• ✅ Only call Hooks from components or custom Hooks

• ✅ React relies on consistent Hook order

• ✅ Use ESLint rule to catch violations

• ✅ These rules ensure predictable behavior

Ready to practice? Challenges | Next: Using useState