fix(transition): Do not create styles for hidden elements

This was a terrible performance bug since hidden elements would update their positioning onScroll.
mlaursen · Jan 30, 2022 · 6eff8a8 · 6eff8a8
1 parent a38abfb
commit 6eff8a8
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/packages/transition/src/useFixedPositioning.ts b/packages/transition/src/useFixedPositioning.ts
@@ -242,7 +242,7 @@ export function useFixedPositioning<
     });
 
     setStyle(style);
-    setActive(!!element);
+    setActive(!!element && !element.hidden);
 
     // Only changing the initialX and initialY should cause the useEffect below
     // to trigger, which is why everything else is set in a ref.
@@ -274,8 +274,10 @@ export function useFixedPositioning<
   });
 
   useEffect(() => {
-    updateStyle();
-  }, [updateStyle]);
+    if (!ref.current || !ref.current.hidden) {
+      updateStyle();
+    }
+  }, [ref, updateStyle]);
 
   const callbacks: Required<FixedPositioningTransitionCallbacks> = {
     onEnter(appearing) {