fix: more DOM element leaks (#39152)

Author: pauldambra

frontend/src/scenes/billing/BillingLineGraph.tsx

@@ -79,7 +79,7 @@ function useBillingTooltip(): {
     useOnMountEffect(() => {
         return () => {
             if (tooltipRootRef.current) {
-                setTimeout(() => tooltipRootRef.current?.unmount(), 0)
+                tooltipRootRef.current.unmount()
             }
             tooltipElRef.current?.remove()
         }

frontend/src/scenes/experiments/MetricsView/legacy/VariantDeltaTimeseries.tsx

@@ -1,5 +1,5 @@
 import { useActions, useValues } from 'kea'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 import { Chart, ChartConfiguration } from 'lib/Chart'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
@@ -13,6 +13,7 @@ const LOWER_BOUND = [0.06, 0.07, 0.06, 0.08, 0.07, 0.09, 0.09, 0.1, 0.115, 0.113
 export const VariantDeltaTimeseries = (): JSX.Element => {
     const { closeVariantDeltaTimeseriesModal } = useActions(modalsLogic)
     const { isVariantDeltaTimeseriesModalOpen } = useValues(modalsLogic)
+    const chartRef = useRef<Chart | null>(null)
 
     useEffect(() => {
         if (isVariantDeltaTimeseriesModalOpen) {
@@ -124,9 +125,16 @@ export const VariantDeltaTimeseries = (): JSX.Element => {
                     },
                 }
 
-                new Chart(ctx, config)
+                chartRef.current = new Chart(ctx, config)
             }, 0)
         }
+
+        return () => {
+            if (chartRef.current) {
+                chartRef.current.destroy()
+                chartRef.current = null
+            }
+        }
     }, [isVariantDeltaTimeseriesModalOpen])
 
     return (

frontend/src/scenes/experiments/MetricsView/new/VariantTimeseriesChart.tsx

@@ -10,6 +10,7 @@ interface VariantTimeseriesChartProps {
 
 export function VariantTimeseriesChart({ chartData: data }: VariantTimeseriesChartProps): JSX.Element {
     const canvasRef = useRef<HTMLCanvasElement>(null)
+    const chartRef = useRef<Chart | null>(null)
 
     useEffect(() => {
         if (!data) {
@@ -114,11 +115,15 @@ export function VariantTimeseriesChart({ chartData: data }: VariantTimeseriesCha
                 },
             }
 
-            new Chart(ctx, config)
+            chartRef.current = new Chart(ctx, config)
         }, 0)
 
         return () => {
             clearTimeout(timeoutId)
+            if (chartRef.current) {
+                chartRef.current.destroy()
+                chartRef.current = null
+            }
         }
     }, [data])
 

frontend/src/scenes/insights/useInsightTooltip.ts

@@ -94,6 +94,7 @@ export function cleanupTooltip(id: string): void {
         if (instance.hideTimeout) {
             clearTimeout(instance.hideTimeout)
         }
+        instance.root.unmount()
         instance.element.remove()
         tooltipInstances.delete(id)
     }