Rules of hooks
The Rules of Hooks are React constraints requiring Hooks to be called at the top level of function components or custom Hooks, unconditionally and in consistent order.
React Quickly, Second Edition
The Rules of Hooks are React usage constraints requiring hooks to be called unconditionally, in the same order, directly from a component or custom hook body.
- How it is used
- Constrains hook placement and ordering so functional components can use state and other hooks reliably across renders.
- How deep it goes
- Explains top-level placement, render-to-render ordering, early returns, and component boundaries through a broken and corrected example.
- Examples
- Uses a Counter component whose isVisible prop creates an illegal conditional useState call and a corrected early-return version.
- What you can do after
- Apply the rules by moving hooks above conditions and returns, and by keeping hook calls inside components or custom hooks.
Read how React Quickly, Second Edition explains rules of hooks →
React Hooks in Action: With Suspense and Concurrent Mode
The Rules of Hooks are React conventions requiring Hooks to be called only from function components or custom Hooks and only at the top level of those functions.
- How it is used
- Governs custom Hook extraction and function-component code so React can reliably manage state and effects.
- How deep it goes
- Explains naming, placement, call-order rationale, conditional effects, and linting, without detailing React’s internal tracking implementation.
- Examples
- Uses useDocumentTitle, useFetch, useUsers, useLocalStorage, and a conditional useEffect pattern.
- What you can do after
- Apply the rules when extracting custom Hooks and use ESLint to detect misplaced or inconsistently called Hooks.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains rules of hooks →
Related concepts
- custom hookconfigures · A custom hook is a developer-defined JavaScript function that composes React Hooks to encapsulate reusable stateful or effectful component logic.
- top-levelconfigures · Top-level is the outermost lexical or syntactic scope of a program or source file, outside nested functions, classes, modules, or blocks.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.