fix(hooks): resolve hydration issues by deferring state updates with …

…startTransition in useResizing
mantinedev · Oct 2, 2024 · 874d3ef · 874d3ef
1 parent 397e782
commit 874d3ef
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/packages/@mantine/core/src/components/AppShell/use-resizing/use-resizing.tsx b/packages/@mantine/core/src/components/AppShell/use-resizing/use-resizing.tsx
@@ -14,18 +14,25 @@ export function useResizing({ transitionDuration, disabled }: UseResizingInput)
   useWindowEvent('resize', () => {
     setResizing(true);
     clearTimeout(resizingTimeout.current);
-    resizingTimeout.current = window.setTimeout(() => setResizing(false), 200);
+    resizingTimeout.current = window.setTimeout(
+      () =>
+        startTransition(() => {
+          setResizing(false);
+        }),
+      200
+    );
   });
 
   useIsomorphicEffect(() => {
-    startTransition(() => {
-      setResizing(true);
-      clearTimeout(disabledTimeout.current);
-      disabledTimeout.current = window.setTimeout(
-        () => setResizing(false),
-        transitionDuration || 0
-      );
-    });
+    setResizing(true);
+    clearTimeout(disabledTimeout.current);
+    disabledTimeout.current = window.setTimeout(
+      () =>
+        startTransition(() => {
+          setResizing(false);
+        }),
+      transitionDuration || 0
+    );
   }, [disabled, transitionDuration]);
 
   return resizing;