Skip to main content

useMergeRefs

The useMergeRefs hook is designed to combine multiple React refs into a single callback ref.

This is particularly useful when you need to apply multiple refs to a single element, such as when working with both internal component logic and external ref forwarding.

By merging refs, you can maintain the functionality of each individual ref while avoiding conflicts or overrides that might occur when attempting to assign multiple refs directly.

This hook enhances component flexibility and reusability, allowing developers to easily integrate both component-specific refs and externally provided refs in a clean, efficient manner.

API​

function useMergeRefs<Generic = HTMLElement>(firstRef: SingleRef<Generic>, secondRef: SingleRef<Generic>): MergedRefCallback<Generic>;

Usage​

import { useMergeRefs } from '@feedzai/js-utilities/hooks';

// a div with multiple refs
function Example({ ref, ...props }) {
  const internalRef = React.useRef();
  const refs = useMergeRefs(internalRef, ref);

  return (
    <div {...props} ref={refs}>
      A div with multiple refs.
    </div>
  );
}