Fixes the use of mergeRefs in the NavLink and Link

useCallback is necessary to prevent multiple calls to refs on each render.
remix-run · Mar 8, 2024 · 8b477c3 · 8b477c3
1 parent f7ac5e8
commit 8b477c3
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
@@ -202,12 +202,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 ? (
@@ -236,12 +238,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 ? (
@@ -1213,3 +1217,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);
+}