Skip to content

Composed Refs

hookrefsdom

Cached companion to composeRefs. Returns a stable ref callback so React does not detach and re-attach composed refs on every commit.

tsx
const localRef = useRef<HTMLButtonElement>(null);const composedRef = useComposedRefs(localRef, props.ref);return <button ref={composedRef} />;

Installation

$pnpm exec dgadd add ui/composed-refs
[Installs to]src/hooks/use-composed-refs.ts[Item]ui/composed-refs

dgadd ships in @diffgazer/add on npm: pnpm add -D @diffgazer/add puts it on pnpm exec, and npx @diffgazer/add runs it without the install.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS from the installed package.

Parameters

NameTypeDefaultDescription
...refsrequiredArray<Ref<T> | null | undefined>—Refs to receive the same node. Object refs, callback refs, null, and undefined are accepted.

Returns

RefCallback<T>Stable callback ref that forwards the node to each provided ref while the individual ref identities stay the same.

Notes

Use at render sites

Use useComposedRefs in components that need to merge an internal ref with a consumer ref. Calling composeRefs inline creates a new callback every render.

Dependency model

The hook keys its callback on the individual ref identities, so pass stable refs from useRef or stable callback refs.

Source

Highlighted source loads after this disclosure opens. Browse the source repository.