246
rules of hooks
also React hooks
Call hooks at the top level, in the same order every render. The order is their identity.
What is rules of hooks?
The rules of hooks say you call hooks from the top level of a function component or a custom hook. Not inside a condition, a loop, or a nested function. React stores hook state in a list keyed by call order. A conditional hook shifts that list and mixes one component’s state into another.
Why does rules of hooks matter when vibe coding?
The draft puts useState inside an if because “we only need it sometimes.” It works until the condition flips, then state lands on the wrong hook and the screen lies.
How do you do rules of hooks?
Call every hook on every render. Put the condition inside the hook or after it. Extract a child component if a whole subtree is optional.
How do you ask a model for rules of hooks?
Follow the rules of hooks in (component). Call hooks at the top level only. Do not put useState or useEffect inside a condition or a loop. Split a child component if a branch needs its own state.
What goes wrong with rules of hooks?
Disabling the hooks lint rule. The rule was the type checker for call order.