ReactIntermediate#hooks

What are the rules of hooks?

Call hooks only at the top level of a React function component or another hook — never inside conditions, loops or nested functions. React relies on a stable call order to match hooks to their state.

Example
// wrong
if (open) { const [x] = useState(0); }
// right
const [x] = useState(0);
if (open) { /* use x */ }

Related Questions

1
ReactIntermediate#hooks#refs

What is useRef used for?

Open
2
ReactAdvanced#hooks#performance

Difference between useMemo and useCallback?

Open
3
ReactAdvanced#performance

What is React.memo?

Open