How to Implement Custom Hooks in React

Custom hooks let you extract component logic into reusable functions. When you notice the same combination of useState, useEffect, and other hooks appearing in multiple components, that is a signal to extract it into a custom hook. Custom hooks share logic, not state. Each component that calls the hook gets its own independent state.

A custom hook is simply a JavaScript function whose name starts with the word use, for example useFetch or useWindowSize. This naming convention is not just a style preference. React uses it to determine that the function is a hook and to enforce the rules of hooks, such as not calling hooks conditionally.

Create the custom hook function and move all the related useState, useEffect, useRef, and other hook calls into it from the component. The hook function can accept parameters to make it configurable. For example, a useFetch hook can accept a URL as a parameter so it works for any endpoint.

At the end of the custom hook, return whatever the consuming component needs. You can return a single value, an array similar to useState, or an object with named properties. Returning an object is often preferred because it allows consumers to rename properties during destructuring without breaking anything.

Import and call the custom hook inside any component just like you would call a built-in hook. Destructure the returned values. The component now has access to all the state and logic from the hook without containing any of that implementation detail itself.

A common custom hook is useFetch which accepts a URL, manages loading, data, and error state internally using useState, triggers the API call using useEffect with the URL in the dependency array, and returns all three state values. Any component that needs to fetch data can simply call useFetch with the appropriate URL.

Another useful custom hook is useLocalStorage which reads an initial value from localStorage on mount, keeps a state variable in sync with localStorage, and automatically writes to localStorage whenever the state changes. This gives you persisted state that survives page refreshes with the same simple interface as useState.

Custom hooks can be tested independently from components using libraries like React Testing Library's renderHook utility. This allows you to write focused tests for your hook logic without needing to render a full component, making your tests simpler and your hook logic more trustworthy.