Fixes the use of mergeRefs in the NavLink and Link

useCallback is necessary to prevent multiple calls to refs on each render.

.changeset/fix-merge-props.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Fix the use of mergeRefs in `NavLink` and `Link` by using useCallback to avoid redundant ref calls.

contributors.yml

@@ -292,6 +292,7 @@
 - jmarbutt
 - jmasson
 - jmorel88
+- jmurzy
 - JNaftali
 - jo-ninja
 - joaosamouco

packages/remix-react/components.tsx

@@ -203,12 +203,14 @@ let NavLink = React.forwardRef<HTMLAnchorElement, RemixNavLinkProps>(
       props
     );
 
+    let mergedRef = useMergedRef(forwardedRef, ref)
+
     return (
       <>
         <RouterNavLink
           {...props}
           {...prefetchHandlers}
-          ref={mergeRefs(forwardedRef, ref)}
+          ref={mergedRef}
           to={to}
         />
         {shouldPrefetch && !isAbsolute ? (
@@ -237,12 +239,14 @@ let Link = React.forwardRef<HTMLAnchorElement, RemixLinkProps>(
       props
     );
 
+    let mergedRef = useMergedRef(forwardedRef, ref)
+
     return (
       <>
         <RouterLink
           {...props}
           {...prefetchHandlers}
-          ref={mergeRefs(forwardedRef, ref)}
+          ref={mergedRef}
           to={to}
         />
         {shouldPrefetch && !isAbsolute ? (
@@ -1270,3 +1274,12 @@ function mergeRefs<T = any>(
     });
   };
 }
+
+function useMergedRef<T = any>(
+  ...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+): React.RefCallback<T> {
+  let rs = refs.filter((r): r is React.Ref<T> => !!r);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useCallback(mergeRefs(...rs), rs);
+}