Table merge useMergeRefs (#2585)

* merge mergeRefs

* changeset

* remove `useMergeRefs` tests from hooks spec file

* deps not depss

* lint

.changeset/seven-elephants-stare.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/hooks': patch
+---
+
+Merges `useMergeRefs` into `useMergeRef` directory

packages/hooks/src/hooks.spec.tsx

@@ -94,41 +94,6 @@ describe('packages/hooks', () => {
     });
   });
 
-  describe('useMergeRefs', () => {
-    test('should merge refs', () => {
-      const callbackRefMockFunc = jest.fn();
-      const callbackRef: React.SetStateAction<HTMLElement | null> = element =>
-        callbackRefMockFunc(element);
-      const mutableRef: React.MutableRefObject<HTMLElement | null> = {
-        current: null,
-      };
-
-      const {
-        result: { current: mergedCallbackRef },
-      } = renderHook(() => useMergeRefs([callbackRef, mutableRef]));
-
-      expect(mergedCallbackRef).toBeInstanceOf(Function);
-      expect(callbackRefMockFunc).not.toHaveBeenCalled();
-      expect(mutableRef.current).toBe(null);
-
-      const element = document.createElement('div');
-      mergedCallbackRef?.(element);
-
-      expect(callbackRefMockFunc).toHaveBeenCalledTimes(1);
-      expect(callbackRefMockFunc).toHaveBeenCalledWith(element);
-      expect(mutableRef.current).toBe(element);
-    });
-
-    test('should return null when all refs are null or undefined', () => {
-      const ref1 = null;
-      const ref2 = undefined;
-
-      const { result } = renderHook(() => useMergeRefs([ref1, ref2]));
-
-      expect(result.current).toBe(null);
-    });
-  });
-
   // Difficult to test a hook that measures changes to the DOM without having access to the DOM
   describe.skip('useMutationObserver', () => {}); //eslint-disable-line jest/no-disabled-tests
 

packages/hooks/src/useMergeRefs/index.ts

@@ -1,21 +1,25 @@
+import * as React from 'react';
+
 /**
- * Copied from https://github.com/gregberge/react-merge-refs
- * @param refs
- * @returns
+ * Merges an array of refs into a single memoized callback ref or `null`.
  */
+export function useMergeRefs<Instance>(
+  refs: Array<React.Ref<Instance> | undefined>,
+): React.RefCallback<Instance> | null {
+  return React.useMemo(() => {
+    if (refs.every(ref => ref == null)) {
+      return null;
+    }
 
-export default function useMergeRefs<T = any>(
-  refs: Array<
-    React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null
-  >,
-): React.RefCallback<T> {
-  return value => {
-    refs.forEach(ref => {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref != null) {
-        (ref as React.MutableRefObject<T | null>).current = value;
-      }
-    });
-  };
+    return value => {
+      refs.forEach(ref => {
+        if (typeof ref === 'function') {
+          ref(value);
+        } else if (ref != null) {
+          (ref as React.MutableRefObject<Instance | null>).current = value;
+        }
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
 }

packages/hooks/src/useMergeRefs/useMergeRefs.spec.tsx

@@ -1,9 +1,43 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import useMergeRefs from '.';
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
-test('useMergeRefs', () => {
+import { useMergeRefs } from '.';
+test('should merge refs', () => {
+  const callbackRefMockFunc = jest.fn();
+  const callbackRef: React.SetStateAction<HTMLElement | null> = element =>
+    callbackRefMockFunc(element);
+  const mutableRef: React.MutableRefObject<HTMLElement | null> = {
+    current: null,
+  };
+
+  const {
+    result: { current: mergedCallbackRef },
+  } = renderHook(() => useMergeRefs([callbackRef, mutableRef]));
+
+  expect(mergedCallbackRef).toBeInstanceOf(Function);
+  expect(callbackRefMockFunc).not.toHaveBeenCalled();
+  expect(mutableRef.current).toBe(null);
+
+  const element = document.createElement('div');
+  mergedCallbackRef?.(element);
+
+  expect(callbackRefMockFunc).toHaveBeenCalledTimes(1);
+  expect(callbackRefMockFunc).toHaveBeenCalledWith(element);
+  expect(mutableRef.current).toBe(element);
+});
+
+test('should return null when all refs are null or undefined', () => {
+  const ref1 = null;
+  const ref2 = undefined;
+
+  const { result } = renderHook(() => useMergeRefs([ref1, ref2]));
+
+  expect(result.current).toBe(null);
+});
+
+test('returns the correct value for multiple refs', () => {
   const TestForwardRefComponent = React.forwardRef(
     function TestForwardRefComponent(_, ref) {
       React.useImperativeHandle(ref, () => 'refValue');
@@ -29,7 +63,7 @@ test('useMergeRefs', () => {
   expect(refAsObj2.current).toBe('refValue');
 });
 
-test('useMergeRefs with undefined and null refs', () => {
+test('returns the correct value with undefined and null refs', () => {
   const TestForwardRefComponent = React.forwardRef(
     function TestForwardRefComponent(_, ref) {
       React.useImperativeHandle(ref, () => 'refValue');