Просмотр исходного кода

fix: optimize shallow routing to prevent unnecessary operations and improve performance

Shun Miyazawa 4 месяцев назад
Родитель
Сommit
d958f0a08d
1 измененных файлов с 14 добавлено и 4 удалено
  1. 14 4
      apps/app/src/pages/[[...path]]/use-shallow-routing.ts

+ 14 - 4
apps/app/src/pages/[[...path]]/use-shallow-routing.ts

@@ -11,16 +11,25 @@ import type { CommonEachProps } from '../common-props';
 export const useShallowRouting = (props: CommonEachProps): void => {
   const router = useRouter();
   const lastPathnameRef = useRef<string>();
+  const lastBrowserUrlRef = useRef<string>();
 
   // Sync pathname by Shallow Routing with performance optimization
   useEffect(() => {
     if (!isClient() || !props.currentPathname) return;
 
-    // Skip if pathname hasn't changed (prevents unnecessary operations)
-    if (lastPathnameRef.current === props.currentPathname) return;
-
     const currentURL = decodeURI(window.location.pathname);
 
+    // Skip if both props.currentPathname and browser URL haven't changed
+    // This handles the case where:
+    // 1. props.currentPathname is the same (e.g., /${pageId})
+    // 2. But browser URL changed via navigation (e.g., /path/to/page)
+    if (
+      lastPathnameRef.current === props.currentPathname &&
+      lastBrowserUrlRef.current === currentURL
+    ) {
+      return;
+    }
+
     // Only update if URLs actually differ
     if (currentURL !== props.currentPathname) {
       const { search, hash } = window.location;
@@ -29,7 +38,8 @@ export const useShallowRouting = (props: CommonEachProps): void => {
       });
     }
 
-    // Update reference for next comparison
+    // Update references for next comparison
     lastPathnameRef.current = props.currentPathname;
+    lastBrowserUrlRef.current = currentURL;
   }, [props.currentPathname, router]);
 };