Custom Hooks

A custom hook is a function whose name starts with use and that may call other hooks.

It lets you reuse stateful logic without copying and pasting useState and useEffect.

useWindowWidth

Rules still apply

Call custom hooks only at the top of components or other hooks.

Do not call them inside loops or conditions.

Return what the caller needs

A value, a pair, or an object. Keep the public surface small.

Hooks share logic, not JSX

If two screens look the same, make a component. If two screens behave the same but look different, make a hook.

Tip: Start by writing the logic in one component. When a second component needs it, extract a hook.