Do not call hooks in conditions, loops, or nested functions.
Section: Rules of Hooks
Call hooks only at the top level
tsx
tsx
// ✅
function MyComponent() {
const [count, setCount] = useState(0);
// ...
}
// ❌
if (condition) {
useEffect(() => {});
}Explanation
React relies on consistent hook call order across renders.
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 from components or custom hooks
Do not call hooks from regular utility functions.
Enable eslint-plugin-react-hooks
Catch rules-of-hooks and dependency mistakes early.
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.