perf: run only position engine when active / needed

abelflopes · Jul 4, 2024 · bf3861c · bf3861c
1 parent a5642a8
commit bf3861c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/packages/components/_provisional/src/dropdown/index.tsx b/packages/components/_provisional/src/dropdown/index.tsx
@@ -30,6 +30,7 @@ export const Dropdown = ({
 }: Readonly<DropdownProps>): React.ReactNode =>
   open && (
     <PositionEngine
+      active={open}
       exclude={excludeAutoPosition}
       position={position}
       anchorRef={anchorRef}

diff --git a/packages/components/_provisional/src/position-engine/PositionEngine.tsx b/packages/components/_provisional/src/position-engine/PositionEngine.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState, type default as React } from "react";
 import * as PositionEngineCore from "./position-engine-core";
 
 export interface PositionEngineProps {
+  active: boolean;
   position: PositionEngineCore.PositionEngineOptions["position"];
   exclude?: PositionEngineCore.PositionEngineOptions["exclude"];
   anchorRef: React.RefObject<HTMLElement>;
@@ -11,6 +12,7 @@ export interface PositionEngineProps {
 }
 
 export const PositionEngine = ({
+  active,
   anchorRef,
   render,
   position,
@@ -19,7 +21,7 @@ export const PositionEngine = ({
   const [renderedElement, setRenderedElement] = useState<React.ReactNode>();
 
   useEffect(() => {
-    if (!anchorRef.current) return;
+    if (!anchorRef.current || !active) return;
 
     const positionEngine = new PositionEngineCore.PositionEngine({
       position,
@@ -31,7 +33,7 @@ export const PositionEngine = ({
     });
 
     return positionEngine.destroy;
-  }, [anchorRef, position, render, exclude]);
+  }, [anchorRef, position, render, exclude, active]);
 
   return renderedElement;
 };
diff --git a/packages/components/_provisional/src/position-engine/position-engine-core.ts b/packages/components/_provisional/src/position-engine/position-engine-core.ts
@@ -1,4 +1,3 @@
-/* eslint-disable max-lines -- ddd */
 import { type StandardLonghandProperties } from "csstype";
 
 type PositionEngineBasePosition = "top" | "bottom" | "left" | "right";
@@ -50,8 +49,7 @@ export class PositionEngine {
   }
 
   public init = (): void => {
-    this.render();
-
+    this.throttledRender();
     this.resizeObserver.observe(this.options.element);
     window.addEventListener("resize", this.throttledRender);
     window.addEventListener("scroll", this.throttledRender, { capture: true });
@@ -60,7 +58,7 @@ export class PositionEngine {
   public destroy = (): void => {
     this.resizeObserver.disconnect();
     window.removeEventListener("resize", this.throttledRender);
-    window.removeEventListener("scroll", this.throttledRender);
+    window.removeEventListener("scroll", this.throttledRender, { capture: true });
 
     if (this.animationFrame !== undefined) cancelAnimationFrame(this.animationFrame);
   };
@@ -296,4 +294,3 @@ export class PositionEngine {
     });
   };
 }
-/* eslint-enable max-lines */