What are the Rules of Hooks and why do they exist?
Quick answer
Call hooks only at the top level (never in loops/conditions) and only from React functions. React identifies hooks by call order, which must be stable.
In detail
React doesn't track hooks by name but by the order they're called on each render. If a hook runs conditionally, the order shifts between renders and React returns the wrong stored state to the wrong hook. So hooks must run unconditionally at the top level, and only inside components or custom hooks. The eslint-plugin-react-hooks rules enforce this.
// ❌ conditional hook
if (loggedIn) { const [x] = useState(0); }
// ✅ always call; branch on the value
const [x, setX] = useState(0);
if (loggedIn) { /* use x */ }Why interviewers ask this: Tests whether you understand how hooks work internally.
Common follow-up questions
- →What error do you get if you break this rule?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399