perf upgrade

src/features/core/hooks/use-router-config.ts

@@ -1,4 +1,5 @@
 import { useMatches } from "@tanstack/react-router";
+import { useMemo } from "react";
 import { HeaderConfig } from "../types/header-config";
 
 export const defaultHeaderConfig: HeaderConfig = {
@@ -10,32 +11,34 @@ export const defaultHeaderConfig: HeaderConfig = {
 const useRouterConfig = () => {
   const matches = useMatches();
 
-  const matchesWithHeader = matches.filter((match) => 
-    match?.loaderData && 'header' in match.loaderData
-  );
+  return useMemo(() => {
+    const matchesWithHeader = matches.filter((match) =>
+      match?.loaderData && 'header' in match.loaderData
+    );
 
-  const headerConfig = matchesWithHeader.reduce((acc, match) => {
-    const loaderData = match?.loaderData;
-    if (loaderData && typeof loaderData === 'object' && 'header' in loaderData) {
-      const header = loaderData.header;
-      if (header && typeof header === 'object') {
-        return {
-          ...acc,
-          ...header,
+    const headerConfig = matchesWithHeader.reduce((acc, match) => {
+      const loaderData = match?.loaderData;
+      if (loaderData && typeof loaderData === 'object' && 'header' in loaderData) {
+        const header = loaderData.header;
+        if (header && typeof header === 'object') {
+          return {
+            ...acc,
+            ...header,
+          }
         }
       }
-    }
-    return acc;
-  }, defaultHeaderConfig);
+      return acc;
+    }, defaultHeaderConfig);
 
-  const current = matches[matches.length - 1]?.loaderData;
+    const current = matches[matches.length - 1]?.loaderData;
 
-  return {
-    header: headerConfig,
-    refresh: current && typeof current === 'object' && 'refresh' in current ? current.refresh : [],
-    withPadding: current && typeof current === 'object' && 'withPadding' in current ? current.withPadding : true,
-    fullWidth: current && typeof current === 'object' && 'fullWidth' in current ? current.fullWidth : false,
-  };
+    return {
+      header: headerConfig,
+      refresh: current && typeof current === 'object' && 'refresh' in current ? current.refresh : [],
+      withPadding: current && typeof current === 'object' && 'withPadding' in current ? current.withPadding : true,
+      fullWidth: current && typeof current === 'object' && 'fullWidth' in current ? current.fullWidth : false,
+    };
+  }, [matches]);
 }
 
 export default useRouterConfig;

src/features/core/hooks/use-visual-viewport-size.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const eventListerOptions = {
   passive: true,
@@ -11,25 +11,49 @@ const useVisualViewportSize = () => {
     height: windowExists ? window.visualViewport?.height || 0 : 0,
     top: windowExists ? window.visualViewport?.offsetTop || 0 : 0,
   });
-
-  const setSize = useCallback(() => {
-    if (!windowExists) return;
-    setWindowSize({ width: window.visualViewport?.width || 0, height: window.visualViewport?.height || 0, top: window.visualViewport?.offsetTop || 0 });
-  }, []);
+  const rafRef = useRef<number | null>(null);
 
   useEffect(() => {
-    if (!windowExists) return;
+    if (typeof window === 'undefined') return;
+
+    const setSize = () => {
+      setWindowSize((prev) => {
+        const next = {
+          width: window.visualViewport?.width || 0,
+          height: window.visualViewport?.height || 0,
+          top: window.visualViewport?.offsetTop || 0,
+        };
+        if (
+          prev.width === next.width &&
+          prev.height === next.height &&
+          prev.top === next.top
+        ) {
+          return prev;
+        }
+        return next;
+      });
+    };
+
+    const scheduleSetSize = () => {
+      if (rafRef.current !== null) return;
+      rafRef.current = window.requestAnimationFrame(() => {
+        rafRef.current = null;
+        setSize();
+      });
+    };
 
     setSize();
 
-    window.visualViewport?.addEventListener('resize', setSize, eventListerOptions);
-    window.visualViewport?.addEventListener('scroll', setSize, eventListerOptions);
+    window.visualViewport?.addEventListener('resize', scheduleSetSize, eventListerOptions);
 
     return () => {
-      window.visualViewport?.removeEventListener('resize', setSize);
-      window.visualViewport?.removeEventListener('scroll', setSize);
-    }
-  }, [setSize]);
+      window.visualViewport?.removeEventListener('resize', scheduleSetSize);
+      if (rafRef.current !== null) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);
 
   return windowSize;
 }