Custom Hooks

Part of the React course

You wrote a drawer that opens and closes. Three useState lines and a handler that flips a boolean. Then the same thing for a dropdown, and again for a modal, and again for a "show more" link. Four components now contain the same six lines, and when you decide the toggle should also remember its last state, you get to change them all and miss one.

A custom hook is the fix, and it is much less exotic than the name suggests. It is a normal JavaScript function whose name starts with use and which calls React's own hooks inside it. That is the entire definition. There is no special syntax, no registration, nothing to import from React to declare one.