following-the-rules-of-hooks

React Rules of Hooks require all hooks to be called at the top level of components, never inside conditions or loops. Move conditional logic into the component body or use hooks like useEffect with dependency arrays to guard execution, keeping hook invocations unconditional.

Hooks rely on consistent call order across renders. Conditional hooks change that order, causing React to misalign state with hook invocations and producing unstable state or render bugs. Hoist hooks to the top level and move conditions into render-time guards instead.

No. Hooks must be called only from React components or custom hooks at the top level. Calling hooks inside callbacks, event handlers, or regular functions violates Rules of Hooks. Extract hook logic into your component body or a custom hook, then call that from your handler.

Custom hooks must call other hooks at the top level without conditions or loops, the same as components. Design custom hooks to perform one focused task, initialize all state and side effects unconditionally, and return values or handlers that manage conditional behavior downstream.

Hooks don't work in class components at all. Rules of Hooks apply to function components and custom hooks. Use lifecycle methods (componentDidMount, componentDidUpdate) in class components instead, or refactor to function components to use hooks.