From 8b477c33e7e67225e45097f98eebd2ba7612c095 Mon Sep 17 00:00:00 2001
From: Jake Murzy <jake@murzy.com>
Date: Fri, 8 Mar 2024 15:22:45 -0800
Subject: [PATCH] Fixes the use of mergeRefs in the NavLink and Link

useCallback is necessary to prevent multiple calls to refs on each render.
---
 packages/remix-react/components.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index b93baee5bb7..823534b70fe 100644
--- 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);
+}