Answer
Hooks must always be called in the exact same order on every render, so they should only be called at the top level of a component or a custom hook, never inside loops, conditions, or nested functions. This rule exists because React relies on that consistent order to correctly match each hook call to its own stored state between renders.
// Breaks the rule, hook is called conditionally
if (showDetails) {
const [details, setDetails] = useState(null);
}
// Follows the rule, hook always called, condition handled inside
const [details, setDetails] = useState(null);
if (showDetails) {
// use details here
}Real-world example A developer fixes a strange bug where a component's state seemed to get mixed up between different fields, after discovering a useState call was hidden inside a conditional statement, breaking the required consistent hook order.