Drills Repository
20 Drills · All Belts · rules-of-hooks
Hook naming and lint behavior
React's Rules of Hooks rely on the "use" naming convention to identify valid Hook call locations, since the linter treats any function starting with "use" as a Hook. Renaming the function removes that signal, so calls inside it are flagged as invalid Hook usage.
Hooks inside event handlers
Hooks are tied to React's render cycle and must execute while React is actively rendering a function component or custom Hook. Event handlers run later in response to user interaction, outside the render process, so React cannot correctly track Hook state there.
Custom Hooks calling Hooks
Custom Hooks work because they remain part of React's rendering flow and must obey the same Rules of Hooks as components. React does not grant them special behavior based on compilation or naming alone; the "use" prefix is simply a linter convention.
useRef inside loops
Hooks rely on identical call order across every render to correctly match internal state slots. Calling useRef inside a map means the number of Hook calls varies with the list's size, which breaks React's Hook tracking system and is why Hooks must remain at a component's top level.
Conditional Hook calls vs regular functions
The Rules of Hooks only apply to functions that call Hooks. A regular utility function without Hook usage can be called conditionally because React does not track it in the Hook call order. Hook ordering matters only for functions using React Hooks internally.
Hook naming affects lint behavior
React's Hook lint rules rely on naming conventions. Functions beginning with use are treated as Hooks, so renaming the function removes the signal the linter uses to validate Hook call ordering. The runtime may still appear fine initially, but the pattern becomes unsafe.
Non-Hook utilities can be conditional
React relies on consistent Hook call order between renders. Regular functions without Hook calls are invisible to React's Hook tracking system, so they can safely run conditionally. Hook-containing functions must execute in the same order every render.
Hooks in regular functions
Hooks may only run inside React function components or custom Hooks because React depends on controlled render execution to associate Hook state correctly. A regular JavaScript function is not part of React's render tree.
Hook call order
React matches Hook state internally by call order across renders, not by variable name. When a Hook is skipped due to a condition, the call order shifts, and React associates the wrong internal state with subsequent Hooks.
Hook after conditional return
Hooks must execute in the exact same order on every render for React to correctly match state and effects. A conditional return placed before a Hook call can prevent that Hook from running on some renders, shifting the ordering React relies on.
Hooks inside useMemo callback
The callback passed to useMemo is a nested function, not a component or custom Hook render scope, so it cannot itself contain Hook calls. React only permits Hooks at the top level of components and custom Hooks to keep Hook ordering predictable.
Conditional Hook calls and hook ordering
React tracks Hooks by their call order during rendering, not by variable names. If a Hook is skipped due to a condition, every Hook after it shifts position, causing React to associate state with the wrong Hook calls.