What are the Rules of Hooks? Why can't you call a hook conditionally?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, etc.) have two rules:

1. **Only call hooks at the top level** — never inside conditions, loops, or nested functions.
2. **Only call hooks from React functions** — components or other custom hooks.

```jsx
function Profile({ id }) {
  const [user, setUser] = useState(null); // ✅ top level
  if (id) {
    const [x] = useState(0);  // ❌ conditional hook — breaks React
  }
}
```

## Why the order must be stable

React does **not** identify hooks by name — it relies on **call order**. On each render it walks the hooks in the exact same sequence and matches each call to a slot in an internal list:

```text
Render 1:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
Render 2:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
```

If you call a hook conditionally, the order can change between renders. Then slot 1 might be `useState(B)` on one render and `useEffect` on the next — React would hand the wrong state to the wrong hook, corrupting everything.

## How to write conditional logic correctly

Keep the hook unconditional and put the condition **inside** it, or branch on the value it returns:

```jsx
const [user, setUser] = useState(null);
useEffect(() => {
  if (!id) return;       // condition INSIDE the effect, not around it
  fetchUser(id).then(setUser);
}, [id]);
```

The `eslint-plugin-react-hooks` lint rule enforces these rules automatically.