What are React Hooks's rules of usage?

Rules of usage of Hooks ensure that react components are pure functions and that state update logic in a component is visible from its source code. You can only call Hooks while React is rendering a function component. Because React relies entirely on the order in which Hooks are called to keep track of their data behind the scenes, you have to follow two strict, non-negotiable rules. To ensure this we follow two basic rules:

Rule 1: Only Call Hooks at the Top Level

1
DO NOT call Hooks inside loops (for, while).
2
DO NOT call Hooks inside conditions (if statements).
3
DO NOT call Hooks inside nested functions.

Rule 2: Only Call Hooks from React Functions

1
Do not call hooks in Class components Javascript functions, Event handlers and Callback functions
2
You can call hooks from react Function Components (the functions that render your UI).
3
You can call hooks from Custom Hooks (your own reusable functions, which must start with the word use, like useAuth or useFetch).

Hooks must be called in the same order on every render. This ensures that React maintains the proper association between state variables and hooks.

Difficulty: 5/10

Topics: rules of hooks, dependency arrays, custom hook patterns

Scenario Questions

0-2 years experience

1
You need to fetch data when a component mounts using useEffect. How would you write it so it follows the Rules of Hooks?
2
What happens if you place a useState call inside an if statement? Explain the runtime behavior.
3
If you accidentally call a custom hook after a return statement, what error would you see and why?

2-5 years experience

1
A component renders either a list or a detail view based on a prop, and you tried to use useMemo only in the list branch, which broke. Why did it break?
2
During a code review you notice a teammate calling useState inside a nested helper function. Why is that a problem and how would you fix it?
3
Your useEffect is missing a dependency and you see stale data in the UI. How would you diagnose and correct the issue?

5-8 years experience

1
Design a reusable data‑fetching custom hook for a large app. How do you ensure it respects the Rules of Hooks while handling cancellation and error states?
2
Your team is migrating many class components to functional components with hooks. What guidelines would you set to avoid rule violations at scale?
3
Explain the performance and correctness implications of calling a hook inside a loop, and show how you would refactor it.

8+ years experience

1
At a company‑wide level you need to enforce the Rules of Hooks across dozens of repositories. What linting, CI, and architectural strategies would you propose?
2
How would you approach refactoring a legacy codebase that mixes class components and hooks, ensuring consistent hook usage and minimizing regression risk?
3
Discuss how you would design a shared library of custom hooks for multiple teams, considering versioning, testing, and rule compliance.

Follow-up Questions

❓Can you share a real bug you ran into because a hook was called conditionally?
❓What tooling do you rely on to catch rule violations before code ships?
❓How do you decide whether to extract logic into a custom hook versus keeping it inline?