useMergeRefs

1import { useCallback, type Ref, type RefCallback } from 'react';
2 
3/**
4 * React 19 compliant hook to merge multiple refs.
5 * Replaces the deprecated 'MutableRefObject' with 'RefObject'.
6 */
7export function useMergeRefs<T>(
8  ...refs: (Ref<T> | undefined | null)[]
9): RefCallback<T> {
10  return useCallback((value: T | null) => {
11    const cleanups: Array<void | (() => void)> = [];
12 
13    refs.forEach((ref) => {
14      if (typeof ref === 'function') {
15        const cleanup = ref(value);
16        if (typeof cleanup === 'function') {
17          cleanups.push(cleanup);
18        }
19      } else if (ref && typeof ref === 'object') {
20        (ref as { current: T | null }).current = value;
21      }
22    });
23 
24    if (cleanups.length > 0) {
25      return () => {
26        cleanups.forEach((cleanup) => {
27          if (typeof cleanup === 'function') cleanup();
28        });
29      };
30    }
31    // eslint-disable-next-line react-hooks/exhaustive-deps
32  }, refs);
33}