Sharing logic, not state
A custom hook is just a function whose name starts with use and that calls other hooks. It packages stateful behavior, such as a timer or a data fetch, so many components can reuse the logic without copying it. Crucially each component that calls the hook gets its own independent state.
- It bundles related state and effects together.
- It returns values and updater functions to the caller.
- Each call site holds a separate copy of the state.
Rules that keep it safe
A custom hook must follow the rules of hooks. Call it at the top level of a component or another hook, never inside a condition or loop, so the order of hook calls stays stable across renders.
- Prefix the name with use so tooling recognizes it.
- Call hooks unconditionally at the top level.
- Return a small, clear interface to the component.
Custom hooks turn duplicated logic into a tested, named building block.
Key idea
A custom hook is a use prefixed function that bundles stateful logic for reuse, giving each caller its own independent state.