useMergedRefs
Combines multiple object or callback refs into one stable callback ref. Use it when a component must forward a consumer ref while also attaching internal refs. Unlike calling mergeRefs during render, the callback identity stays stable across unrelated rerenders, so React does not detach and reattach the element.
@astryxdesign/core/hooks
Signature
Call shape
useMergedRefs<T>(refA?: Ref<T>, refB?: Ref<T>, refC?: Ref<T>, refD?: Ref<T>, refE?: Ref<T>, refF?: Ref<T>): RefCallback<T>Parameters
| Name | Type and behavior |
|---|---|
refs | Array<Ref<T> | undefined> · requiredUp to six refs that should all receive the same element. |
Returns
| Name | Type and behavior |
|---|---|
ref | RefCallback<T>A merged callback ref that remains stable until an input ref changes. |
Usage
Combines multiple object or callback refs into one stable callback ref. Use it when a component must forward a consumer ref while also attaching internal refs. Unlike calling mergeRefs during render, the callback identity stays stable across unrelated rerenders, so React does not detach and reattach the element.
- Use useMergedRefs when one element must receive both a forwarded ref and one or more internal refs.
- Call mergeRefs directly in a JSX ref prop; that creates a new callback on every render and forces unnecessary detach and attach work.