Detailed explanation
The Rules of Hooks define where React Hooks such as useState, useEffect, and useContext can be called. The two core rules are: call Hooks at the top level, and call them only from React function components or custom Hooks. Top level means outside conditions, loops, nested functions, and try/catch/finally blocks, and before any conditional early return. These rules let React preserve state and associate effects with the correct component instance across renders. They are correctness requirements, not simply formatting conventions.
Under the hood, React tracks ordinary Hooks in their call order for each component instance. Suppose a component calls useState for a name, then useState for an age, followed by useEffect. React expects that same sequence on every render. If the second call runs only when a condition is true, a later render can shift the sequence, leaving React unable to match Hook calls to their previous data correctly. React may report that the component rendered more or fewer Hooks than expected. Hook variable names do not provide this identity; their positions in the sequence do.
To make behaviour conditional, keep the Hook call unconditional and move the condition into its logic or the component’s rendering logic. For example, call const [x] = useState(0) before checking open, rather than inside if (open). For an effect that should act only while open, call useEffect at the top level and check open inside its callback, with the appropriate dependencies. Do not call Hooks in event handlers, ordinary utility functions, class components, or callbacks passed to useMemo. Extract reusable Hook-based logic into a custom Hook whose name starts with use; that custom Hook must follow the same rules.
Interviewers usually check whether you can explain stable call order and fix conditional calls, including those hidden after early returns. Use eslint-plugin-react-hooks to catch violations; its dependency checks address a related but separate concern. One modern exception is React’s use API: it can be called in conditions and loops, but still only within a component or Hook, and not inside try/catch. This exception does not apply to useState or useEffect.
Key points to remember
- Call Hooks only from React function components or custom Hooks.
- Keep ordinary Hook calls unconditional and before conditional early returns.
- React associates ordinary Hooks with stored data using their call order.
- Put conditional behaviour inside an effect callback or rendering logic, not around the Hook call.
- Use eslint-plugin-react-hooks; remember that React’s use API has different conditional-call rules.
Common mistakes candidates make
- Calling a Hook after an early return that runs on only some renders.
- Calling Hooks inside event handlers, loops, or useMemo callbacks.
- Assuming a custom Hook can call other Hooks conditionally because it wraps the logic.
Likely follow-up questions
How do you run an effect only when a condition is true?
Call useEffect unconditionally, then check the condition inside its callback and return immediately when it is false. Include the condition and other reactive values used by the effect in its dependency array.
Can a custom Hook be called conditionally?
No; custom Hooks must also be called at the top level. You can pass an enabled flag into the custom Hook and use it to control behaviour while keeping its internal Hook calls unconditional.
How can Hooks be used for a dynamic list of items?
Render a child component for each item and call the required Hooks at the top level of that child. Give each child a stable key so React can preserve its component identity when the list changes.
Interview tip: State the two rules first, explain stable call order, and demonstrate moving a conditional check inside an effect.