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 is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

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.