Understanding Custom Hooks

Suppose a page header and a sidebar both need to know how wide the browser window is. Each one needs a piece of state that holds the width, and an effect that listens for the browser's resize event and updates that state. Writing the same useState and useEffect code in both components works, but now there are two copies to keep correct, and a fix in one is easy to forget in the other.

A custom hook removes the copy. It is an ordinary JavaScript function whose name starts with use and which calls other hooks, such as useState and useEffect