Skip to content
38
Hooks & utilities

The hooks behind the components.

The hooks and helpers the components are built on: controlled or uncontrolled state, media queries, debouncing, clipboard copies, reduced-motion detection, ref merging and file sizes. Install one on its own when you write your own components.

7 items in 2 categories

A value that is controlled through a prop or kept internally, with one setter that updates either and reports the change. The pattern behind value and defaultValue.

View

Live prefers-reduced-motion match without an animation library. Renders false on the server, so hydration never mismatches, and updates when the setting changes.

View

Live match for any CSS media query, like a breakpoint, dark mode or a touch screen. Renders a fixed value on the server so hydration never mismatches, then follows the real match.

View

useDebouncedValue holds a value back until it stops changing, for search as you type. useDebouncedCallback returns a stable function with cancel and flush, for autosave.

View

Copies text and reports copied for a moment, so a copy button can swap to a check mark. Returns false instead of throwing when the browser refuses.

View

Utilities

View all 2

composeRefs

Utilities

Merges several refs into one callback ref, so a part can keep its own ref and still forward the element. Returns React 19 ref cleanups.

View

formatBytes

Utilities

Human-readable file sizes in binary steps, such as 1.5 KB or 12.0 MB, for upload lists and storage meters.

View