Custom Hooks

A custom Hook is an ordinary JavaScript function whose name begins with use and which is allowed to call other Hooks. That is the whole definition — no registration step, no base class, no special import. Move a useState and a useEffect out of a component into a function named useSomething and React 7,897 treats it exactly as it treats the built-in Hooks.

What you gain is a way to share stateful logic. The distinction matters: two components that call useWindowSize() do not share one width variable, each gets its own state, Effect and cleanup. Only the logic is written once. Sharing the value is what Context (Context and Reducers) and external stores are for.

Hooks also replace the two patterns React used before 2019 for this job, higher-order components and render props (Component Design Patterns), which wrap your component in layers that clutter the tree and fight over prop names. A Hook adds no element at all. The eight Hooks below cover most projects, and writing them yourself usually beats a dependency — but know the ecosystem.

Install any of them the usual way, for example npm 2,036 install usehooks-ts. Read the source first: a Hook is usually twenty lines, and owning them costs less than a dependency upgraded in step with React.

Subsections

• Extracting a Custom Hook
• The Rules of Hooks
• usePrevious
• useFetch
• useWindowSize
• useOutsideAlerter
• useScript
• useDebounce
• useLocalStorage
• useDebugValue