From bf3861c0e7947732433268f9d9d30bcd4c697a40 Mon Sep 17 00:00:00 2001
From: Abel Lopes <abelflopes@gmail.com>
Date: Thu, 4 Jul 2024 21:11:49 +0100
Subject: [PATCH] perf: run only position engine when active / needed

---
 packages/components/_provisional/src/dropdown/index.tsx    | 1 +
 .../_provisional/src/position-engine/PositionEngine.tsx    | 6 ++++--
 .../src/position-engine/position-engine-core.ts            | 7 ++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/components/_provisional/src/dropdown/index.tsx b/packages/components/_provisional/src/dropdown/index.tsx
index 91e22661..ffa8e25f 100644
--- 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
index ea2cd821..615ea053 100644
--- 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
index 9a722bb1..9be12e36 100644
--- 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 */