hooks-pattern

Create a function prefixed with `use` that calls built-in hooks like useState or useEffect and returns the values consumers need. For example, a useKeyPress hook encapsulates event listener setup and cleanup, returning a boolean any component can reuse.

Extract a custom hook when the same stateful logic, subscription, or side effect appears in multiple components. Plain helper functions, one-off component state with no reuse signal, and inline useState calls do not warrant a custom hook.

Hooks must only be called at the top level of a function, never inside loops, conditions, or nested functions. They must only be called from React function components or other custom hooks, and custom hooks must start with `use` so linting can verify compliance.

Prefer letting the React Compiler handle memoization automatically instead of adding manual useMemo and useCallback calls. Manual memoization is frequently misused and adds complexity without measurable benefit in most components.

Keep logic in the component when it is component-specific state with no reuse across the codebase, or when it is a plain helper function with no hook calls. Derived state should be computed directly in the component body rather than in useEffect.