What are React hooks and what rules must you follow when using them?

Hooks are functions like useState and useEffect that let function components use state and lifecycle features. The Rules of Hooks require calling them only at the top level of React functions and only from React function components or custom hooks—never conditionally, in loops keyed by changing logic, or from random callbacks.

React associates hook state with the call order of hooks for each component instance. Conditional calls would change that order between renders and corrupt internal state. Custom hooks let you reuse stateful logic while still obeying the same rules.