How do I prevent breaking the rules of hooks?
Enable eslint-plugin-react-hooks, which catches rule violations automatically. And remember that you can have conditionals in your component; you just cannot call hooks conditionally. Move conditions inside the hook, not around it.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in The Rules of Hooks: What You Can and Cannot Do in React
Two rules: only call hooks at the top level of a component or custom hook, never inside loops, conditions, or nested functions. And only call hooks from React functions, not regular functions or class components.
Because React identifies hooks by their call order. If a hook is inside a condition, the order can change between renders, and React's internal tracking breaks, causing state to be assigned to the wrong hook and leading to subtle bugs.
Symptoms include state becoming mixed up between variables, effects running at the wrong time, and hard-to-trace crashes. The code may seem to work sometimes and fail other times, which makes these bugs especially painful.
Still have questions?
Browse all our FAQs or reach out to our support team