The Rules of Hooks keep React hook calls predictable: call each hook every render, in the same order, directly inside a functional component or custom hook. section 5.2.1 section 7.8
Apply the rules with these checks:
- Call hooks at the top level of a component; do not place them inside conditions, loops, or after an optional return. section 5.2.1 section 7.8
- Call hooks only inside functional components or custom hooks, not ordinary helper functions or class-based components. section 7.7 section 7.8
- Name custom hooks with the use prefix, such as useCounter. section 5.2.1
Move the early return below the hook
This breaks the rules because useState runs only when isVisible is true:\n\nfunction Counter({ isVisible }) {\n if (!isVisible) return null;\n const [counter, setCounter] = useState(0);\n}\n\nInitialize the hook on every render instead:\n\nfunction Counter({ isVisible }) {\n const [counter, setCounter] = useState(0);\n if (!isVisible) return null;\n return /* counter UI */;\n} section 5.2.1
