Fix memory leaks (#1054)

src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts

@@ -34,6 +34,8 @@ export default class TwoUp extends HTMLElement {
    */
   private _everConnected = false;
 
+  private _resizeObserver?: ResizeObserver;
+
   constructor() {
     super();
     this._handle.className = styles.twoUpHandle;
@@ -45,13 +47,6 @@ export default class TwoUp extends HTMLElement {
       childList: true,
     });
 
-    // Watch for element size changes.
-    if ('ResizeObserver' in window) {
-      new ResizeObserver(() => this._resetPosition()).observe(this);
-    } else {
-      window.addEventListener('resize', () => this._resetPosition());
-    }
-
     // Watch for pointers on the handle.
     const pointerTracker: PointerTracker = new PointerTracker(this._handle, {
       start: (_, event) => {
@@ -68,8 +63,6 @@ export default class TwoUp extends HTMLElement {
         );
       },
     });
-
-    window.addEventListener('keydown', (event) => this._onKeyDown(event));
   }
 
   connectedCallback() {
@@ -84,12 +77,28 @@ export default class TwoUp extends HTMLElement {
         }</svg>
       `}</div>`;
 
+    // Watch for element size changes.
+    if ('ResizeObserver' in window) {
+      this._resizeObserver = new ResizeObserver(() => this._resetPosition());
+      this._resizeObserver.observe(this);
+    } else {
+      window.addEventListener('resize', this._onResize);
+    }
+
+    window.addEventListener('keydown', this._onKeyDown);
+
     if (!this._everConnected) {
       this._resetPosition();
       this._everConnected = true;
     }
   }
 
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this._onKeyDown);
+    window.removeEventListener('resize', this._onResize);
+    if (this._resizeObserver) this._resizeObserver.disconnect();
+  }
+
   attributeChangedCallback(name: string) {
     if (name === orientationAttr) {
       this._resetPosition();
@@ -97,7 +106,7 @@ export default class TwoUp extends HTMLElement {
   }
 
   // KeyDown event handler
-  private _onKeyDown(event: KeyboardEvent) {
+  private _onKeyDown = (event: KeyboardEvent) => {
     const target = event.target;
     if (target instanceof HTMLElement && target.closest('input')) return;
 
@@ -122,7 +131,9 @@ export default class TwoUp extends HTMLElement {
       this._relativePosition = this._position / bounds[dimensionAxis];
       this._setPosition();
     }
-  }
+  };
+
+  private _onResize = () => this._resetPosition();
 
   private _resetPosition() {
     // Set the initial position of the handle.

src/client/lazy-app/Compress/index.tsx

@@ -377,6 +377,7 @@ export default class Compress extends Component<Props, State> {
 
   componentWillUnmount(): void {
     updateDocumentTitle({ loading: false });
+    this.widthQuery.removeListener(this.onMobileWidthChange);
     this.mainAbortController.abort();
     for (const controller of this.sideAbortControllers) {
       controller.abort();