The Rules of Hooks: What You Can and Cannot Do in React

The Rules of Hooks: What You Can and Cannot Do in React

React hooks come with two strict rules. They are not suggestions; breaking them causes bugs that are hard to trace. Here is what the rules are and why they exist.

Rule 1: Only Call Hooks at the Top Level

Do not call hooks inside loops, conditions, or nested functions. Always call them at the top level of your component or custom hook, before any early returns.

Why This Rule Exists

React identifies hooks by their call order. If a hook is inside a condition, the order can change between renders, and React's internal tracking breaks. This leads to state being assigned to the wrong hook.

Rule 2: Only Call Hooks from React Functions

Call hooks from functional components or custom hooks, not from regular functions or class components. Hooks rely on React's rendering context.

What Happens When You Break Them

Symptoms include state becoming mixed up between variables, effects running at the wrong time, and hard-to-trace crashes. The code may seem to work sometimes and fail other times.

The Common Mistakes

Putting a useState inside an if statement, calling a hook inside a callback, or calling hooks in a loop. All of these break the order rule.

The Safety Net

The eslint-plugin-react-hooks plugin catches these mistakes automatically. Enable it and it warns you the moment you break a rule.

Conditionals Are Fine, Just Not Around Hooks

You can have conditionals in your component; you just cannot call hooks conditionally. Move conditions inside the hook, for example by returning early inside useEffect, not by skipping the hook call.

The Takeaway

Call hooks at the top level, only from React functions, never inside loops or conditions. Enable the lint plugin. These rules exist because React tracks hooks by call order, and breaking that order causes subtle, painful bugs.