`useMergedRefs`

Merges multiple refs into a single callback ref. Useful when a component receives a forwarded ref but also needs its own internal ref on the same element. Both refs receive the latest value.

The callback’s identity depends on each passed ref — since useRef / forwardRef refs are stable across renders, the resulting callback is also stable in normal usage.


import { forwardRef, useEffect, useRef } from 'react'
import { useMergedRefs } from '@wire-ui/react'
 
interface AutoFocusInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
const AutoFocusInput = forwardRef<HTMLInputElement, AutoFocusInputProps>(
  function AutoFocusInput(props, forwardedRef) {
    const localRef = useRef<HTMLInputElement>(null)
    const mergedRef = useMergedRefs(localRef, forwardedRef)
 
    useEffect(() => {
      localRef.current?.focus()
    }, [])
 
    return <input ref={mergedRef} {...props} />
  },
)

Parameters

useMergedRefs<T>(...refs) accepts any number of refs:

Type	Notes
`Ref<T>`	Object ref returned by `useRef` or a forwarded ref.
`RefCallback<T>`	Function refs, e.g. `(el) => setEl(el)`.
`MutableRefObject<T \| null>`	Mutable refs.
`null \| undefined`	Skipped — pass-through for optional refs.

Returns

A RefCallback<T> to assign to ref={...}. When called by React, every passed-in ref is updated.