Catch rules-of-hooks and dependency mistakes early.
Section: Rules of Hooks
Enable eslint-plugin-react-hooks
bash
bash
npm install -D eslint-plugin-react-hooksExplanation
The hooks ESLint plugin catches hook order problems and effect dependency issues.
Learn the surrounding workflow
Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.
Related commands
Same sheet · prioritizing Rules of Hooks
Call hooks only at the top level
Do not call hooks in conditions, loops, or nested functions.
Call hooks only from components or custom hooks
Do not call hooks from regular utility functions.
Stale closure pitfall
Effects and callbacks capture values from the render where they were created.
Do not memoize everything
Memoization has a cost; use it when it solves a concrete problem.
Memoize objects used in dependencies
Avoid recreating dependency objects every render when identity matters.
Derive data during render when possible
Avoid effects that only derive data from props/state.