React hook patterns for reusable logic
How to extract logic into custom hooks without ending up with an abstraction tree that is hard to maintain.
When a hook is worth it
A custom hook makes sense when the same combination of state, effects and logic appears in two or more components, or when a component starts mixing responsibilities that are easier to understand separately.
Extracting a hook for a single line of code only adds indirection. Before creating one, ask which concrete problem it solves and how you would describe that problem in one sentence.
One hook, one responsibility
Good hooks have names that describe what they do: useDebounce, useLocalStorage, useOnClickOutside. If the name needs the word "and", it is probably two hooks.
Return stable, easy-to-consume values, keep side effects inside the hook, and define their cleanup (the return function of useEffect) clearly.
Common mistakes
The most frequent mistake is leaving dependencies out of useEffect to "avoid a loop". The loop usually comes from an object or function recreated on every render; the fix is to stabilise that reference or move the calculation inside the effect, not to silence the rule.
Enable eslint-plugin-react-hooks and treat its warnings as design feedback, not noise.