What are the Rules of Hooks in React?
Understand the two Rules of Hooks in React, why Hook call order matters, common violations, and how eslint-plugin-react-hooks enforces them, with examples.
Expected Interview Answer
The Rules of Hooks are two constraints React enforces: only call Hooks at the top level of a component or another Hook, and only call them from React function components or custom Hooks — never from regular JavaScript functions.
React relies on a stable call order to associate each Hook with its state between renders. If you call Hooks inside conditions, loops, or nested functions, that order can change from one render to the next, and React loses track of which state belongs to which Hook. Keeping every Hook at the top level and only calling them from valid places keeps the order consistent. The eslint-plugin-react-hooks tool catches most violations automatically.
- Guarantees a consistent Hook call order across renders
- Keeps state correctly associated with each Hook
- Prevents subtle, hard-to-debug state bugs
- Enforceable automatically via the ESLint plugin
- Makes component logic predictable and readable
AI Mentor Explanation
Rules of Hooks are like a fixed batting order agreed before a match. Every innings the players walk out in the same numbered sequence, so the scorer always knows who is who. Shuffle the order midway based on the score and the scorebook gets confused about which runs belong to which batter — exactly the mismatch React avoids by keeping Hook order fixed.
Step-by-Step Explanation
Step 1
Call Hooks at the top level
Place every Hook call directly in the component body, not inside if, for, or nested functions.
Step 2
Only from valid callers
Call Hooks from React function components or from other custom Hooks — never plain JS functions or class components.
Step 3
Keep order stable
Ensure the same Hooks run in the same order on every render so React can match state correctly.
Step 4
Handle conditions inside
Instead of a conditional Hook, call the Hook always and put the condition inside its logic or the returned value.
Step 5
Enable the linter
Add eslint-plugin-react-hooks so violations are caught automatically during development.
What Interviewer Expects
- The two rules stated precisely
- Why a stable call order matters to React
- Examples of violations: conditional or looped Hook calls
- Awareness of eslint-plugin-react-hooks
- How to refactor a conditional Hook correctly
Common Mistakes
- Calling a Hook inside an if statement or early return
- Calling Hooks inside loops or nested callbacks
- Calling Hooks from regular functions or class components
- Believing the linter enforces the rules at runtime
- Adding an early return before a Hook call
Best Answer (HR Friendly)
“The Rules of Hooks are simple guidelines: always use React Hooks at the top of a component and only inside React functions, never inside conditions or loops. Following them lets React reliably keep track of each piece of state, avoiding confusing bugs.”
Code Example
// Wrong: Hook called conditionally
function Profile({ isLoggedIn }) {
if (isLoggedIn) {
const [name, setName] = useState('') // breaks Hook order
}
return null
}
// Right: Hook always called, condition inside logic
function Profile({ isLoggedIn }) {
const [name, setName] = useState('')
useEffect(() => {
if (!isLoggedIn) return
// load profile only when logged in
}, [isLoggedIn])
return isLoggedIn ? <h1>{name}</h1> : <p>Please log in</p>
}Follow-up Questions
- Why does React depend on the order of Hook calls?
- How do you conditionally run logic without a conditional Hook?
- Can you call Hooks in a class component? Why not?
- What does eslint-plugin-react-hooks catch?
- What happens if an early return sits before a Hook call?
MCQ Practice
1. Where must Hooks be called?
Hooks must run at the top level so their call order stays consistent across every render.
2. Why can't Hooks be called conditionally?
React tracks each Hook by the order it is called. A condition can change that order between renders and misassign state.
3. From where is it valid to call a Hook?
Hooks may only be called from React function components or other custom Hooks.
Flash Cards
What are the two Rules of Hooks? — Call Hooks only at the top level, and only from React function components or custom Hooks.
Why must Hooks keep a stable order? — React matches each Hook to its state by call order, which must not change between renders.
How do you avoid a conditional Hook? — Always call the Hook, then put the condition inside its logic or return value.
What tool enforces the rules? — eslint-plugin-react-hooks flags violations during development.