chore: upgrade react 18 (#17731)

frontend/src/exporter/index.tsx

@@ -1,6 +1,6 @@
 import '~/styles'
 import './Exporter.scss'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { loadPostHogJS } from '~/loadPostHogJS'
 import { initKea } from '~/initKea'
 import { Exporter } from '~/exporter/Exporter'
@@ -20,11 +20,10 @@ const exportedData: ExportedData = window.POSTHOG_EXPORTED_DATA
 function renderApp(): void {
     const root = document.getElementById('root')
     if (root) {
-        ReactDOM.render(
+        createRoot(root).render(
             <ErrorBoundary>
                 <Exporter {...exportedData} />
-            </ErrorBoundary>,
-            root
+            </ErrorBoundary>
         )
     } else {
         console.error('Attempted, but could not render PostHog app because <div id="root" /> is not found.')

frontend/src/index.tsx

@@ -1,6 +1,6 @@
 import '~/styles'
 
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { getContext } from 'kea'
 
 import { App } from 'scenes/App'
@@ -28,13 +28,12 @@ if (typeof window !== 'undefined') {
 function renderApp(): void {
     const root = document.getElementById('root')
     if (root) {
-        ReactDOM.render(
+        createRoot(root).render(
             <ErrorBoundary>
                 <PostHogProvider client={posthog}>
                     <App />
                 </PostHogProvider>
-            </ErrorBoundary>,
-            root
+            </ErrorBoundary>
         )
     } else {
         console.error('Attempted, but could not render PostHog app because <div id="root" /> is not found.')

frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useRef, useState } from 'react'
 import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
 import { LemonModal, LemonModalProps } from 'lib/lemon-ui/LemonModal'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { useValues } from 'kea'
 import { router } from 'kea-router'
 
@@ -86,14 +86,15 @@ export function LemonDialog({
 
 LemonDialog.open = (props: LemonDialogProps) => {
     const div = document.createElement('div')
+    const root = createRoot(div)
     function destroy(): void {
-        const unmountResult = ReactDOM.unmountComponentAtNode(div)
-        if (unmountResult && div.parentNode) {
+        root.unmount()
+        if (div.parentNode) {
             div.parentNode.removeChild(div)
         }
     }
 
     document.body.appendChild(div)
-    ReactDOM.render(<LemonDialog {...props} onAfterClose={destroy} />, div)
+    root.render(<LemonDialog {...props} onAfterClose={destroy} />)
     return
 }

frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useCallback, useMemo } from 'react'
+import React, { FunctionComponent, ReactNode, useCallback, useMemo } from 'react'
 import { LemonButton, LemonButtonProps } from '../LemonButton'
 import { TooltipProps } from '../Tooltip'
 import { TooltipPlacement } from 'antd/lib/tooltip'
@@ -256,7 +256,7 @@ const LemonMenuItemButton: FunctionComponent<LemonMenuItemButtonProps & React.Re
                     size={size}
                     {...buttonProps}
                 >
-                    {label as string | JSX.Element}
+                    {label as ReactNode}
                     {keyboardShortcut && (
                         <div className="-mr-0.5 inline-flex grow justify-end">
                             {/* Show the keyboard shortcut on the right */}

frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Placement } from '@floating-ui/react'
 import { kea, path, actions, reducers, listeners, selectors, connect, afterMount, beforeUnmount } from 'kea'
 import type { inAppPromptLogicType } from './inAppPromptLogicType'
@@ -125,9 +125,10 @@ function cancellableTooltipWithRetries(
     const close = (): number => window.setTimeout(trigger, 1)
     const show = new Promise((resolve, reject) => {
         const div = document.createElement('div')
+        const root = createRoot(div)
         function destroy(): void {
-            const unmountResult = ReactDOM.unmountComponentAtNode(div)
-            if (unmountResult && div.parentNode) {
+            root.unmount()
+            if (div.parentNode) {
                 div.parentNode.removeChild(div)
             }
         }
@@ -182,7 +183,7 @@ function cancellableTooltipWithRetries(
                     props = { ...props, element }
                 }
 
-                ReactDOM.render(<LemonActionableTooltip {...props} />, div)
+                root.render(<LemonActionableTooltip {...props} />)
 
                 resolve(true)
             } catch (e) {

frontend/src/lib/logic/promptLogic.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { kea, props, path, key, actions, events, listeners } from 'kea'
 import { Modal, ModalProps, Input, InputProps, Form, FormItemProps } from 'antd'
 
@@ -118,12 +118,13 @@ export function cancellablePrompt(config: Pick<PromptProps, 'title' | 'placehold
     }
     const promise = new Promise((resolve, reject) => {
         const div = document.createElement('div')
+        const root = createRoot(div)
         document.body.appendChild(div)
         let currentConfig: PromptProps = { ...config, close, visible: true } as any
 
         function destroy(value: unknown): void {
-            const unmountResult = ReactDOM.unmountComponentAtNode(div)
-            if (unmountResult && div.parentNode) {
+            root.unmount()
+            if (div.parentNode) {
                 div.parentNode.removeChild(div)
             }
             if (typeof value === 'string') {
@@ -134,7 +135,7 @@ export function cancellablePrompt(config: Pick<PromptProps, 'title' | 'placehold
         }
 
         function render(props: PromptProps): void {
-            ReactDOM.render(<Prompt {...props} />, div)
+            root.render(<Prompt {...props} />)
         }
 
         function close(this: PromptProps, value: string): void {

frontend/src/scenes/funnels/useFunnelTooltip.tsx

@@ -1,13 +1,12 @@
 import { useValues } from 'kea'
 import { useEffect, useRef } from 'react'
-import ReactDOM from 'react-dom'
 import { FunnelStepWithConversionMetrics } from '~/types'
 import { LemonRow } from 'lib/lemon-ui/LemonRow'
 import { Lettermark, LettermarkColor } from 'lib/lemon-ui/Lettermark'
 import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
 import { getActionFilterFromFunnelStep } from 'scenes/insights/views/Funnels/funnelStepTableUtils'
 import { humanFriendlyDuration, humanFriendlyNumber, percentage } from 'lib/utils'
-import { ensureTooltipElement } from 'scenes/insights/views/LineGraph/LineGraph'
+import { ensureTooltip } from 'scenes/insights/views/LineGraph/LineGraph'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { cohortsModel } from '~/models/cohortsModel'
 import { ClickToInspectActors } from 'scenes/insights/InsightTooltip/InsightTooltip'
@@ -109,14 +108,14 @@ export function useFunnelTooltip(showPersonsModal: boolean): React.RefObject<HTM
 
     useEffect(() => {
         const svgRect = vizRef.current?.getBoundingClientRect()
-        const tooltipEl = ensureTooltipElement()
+        const [tooltipRoot, tooltipEl] = ensureTooltip()
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
         if (isTooltipShown) {
             tooltipEl.style.display = 'initial'
         }
         const tooltipRect = tooltipEl.getBoundingClientRect()
         if (tooltipOrigin) {
-            ReactDOM.render(
+            tooltipRoot.render(
                 <>
                     {currentTooltip && (
                         <FunnelTooltip
@@ -127,8 +126,7 @@ export function useFunnelTooltip(showPersonsModal: boolean): React.RefObject<HTM
                             breakdownFilter={breakdown}
                         />
                     )}
-                </>,
-                tooltipEl
+                </>
             )
             // Put the tooltip to the bottom right of the cursor, but flip to left if tooltip doesn't fit
             let xOffset: number

frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx

@@ -1,15 +1,13 @@
 import { useValues } from 'kea'
 import { useLayoutEffect, useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
-import Textfit from './Textfit'
 import clsx from 'clsx'
 
 import { insightLogic } from '../../insightLogic'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 import { ChartParams, TrendResult } from '~/types'
 import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
-import { ensureTooltipElement } from '../LineGraph/LineGraph'
+import { ensureTooltip } from '../LineGraph/LineGraph'
 import { groupsModel } from '~/models/groupsModel'
 import { InsightTooltip } from 'scenes/insights/InsightTooltip/InsightTooltip'
 import { IconFlare, IconTrendingDown, IconTrendingFlat, IconTrendingUp } from 'lib/lemon-ui/icons'
@@ -20,6 +18,8 @@ import { openPersonsModal } from 'scenes/trends/persons-modal/PersonsModal'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 
 import './BoldNumber.scss'
+import { useEffect } from 'react'
+import Textfit from './Textfit'
 
 /** The tooltip is offset by a few pixels from the cursor to give it some breathing room. */
 const BOLD_NUMBER_TOOLTIP_OFFSET_PX = 8
@@ -37,17 +37,18 @@ function useBoldNumberTooltip({
 
     const divRef = useRef<HTMLDivElement>(null)
 
+    const divRect = divRef.current?.getBoundingClientRect()
+    const [tooltipRoot, tooltipEl] = ensureTooltip()
+
     useLayoutEffect(() => {
-        const divRect = divRef.current?.getBoundingClientRect()
-        const tooltipEl = ensureTooltipElement()
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
         if (isTooltipShown) {
             tooltipEl.style.display = 'initial'
         }
 
         const seriesResult = insightData?.result?.[0]
 
-        ReactDOM.render(
+        tooltipRoot.render(
             <InsightTooltip
                 renderCount={(value: number) => <>{formatAggregationAxisValue(trendsFilter, value)}</>}
                 seriesData={[
@@ -64,20 +65,20 @@ function useBoldNumberTooltip({
                 hideColorCol
                 hideInspectActorsSection={!showPersonsModal}
                 groupTypeLabel={aggregationLabel(series?.[0].math_group_type_index).plural}
-            />,
-            tooltipEl,
-            () => {
-                const tooltipRect = tooltipEl.getBoundingClientRect()
-                if (divRect) {
-                    const desiredTop = window.scrollY + divRect.top - tooltipRect.height - BOLD_NUMBER_TOOLTIP_OFFSET_PX
-                    const desiredLeft = divRect.left + divRect.width / 2 - tooltipRect.width / 2
-                    tooltipEl.style.top = `${Math.min(desiredTop, window.innerHeight)}px`
-                    tooltipEl.style.left = `${Math.min(desiredLeft, window.innerWidth)}px`
-                }
-            }
+            />
         )
     }, [isTooltipShown])
 
+    useEffect(() => {
+        const tooltipRect = tooltipEl.getBoundingClientRect()
+        if (divRect) {
+            const desiredTop = window.scrollY + divRect.top - tooltipRect.height - BOLD_NUMBER_TOOLTIP_OFFSET_PX
+            const desiredLeft = divRect.left + divRect.width / 2 - tooltipRect.width / 2
+            tooltipEl.style.top = `${Math.min(desiredTop, window.innerHeight)}px`
+            tooltipEl.style.left = `${Math.min(desiredLeft, window.innerWidth)}px`
+        }
+    })
+
     return divRef
 }
 

frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
+import { Root, createRoot } from 'react-dom/client'
 import { useValues } from 'kea'
 import {
     ActiveElement,
@@ -38,16 +38,23 @@ import { TrendsFilter } from '~/queries/schema'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import ChartjsPluginStacked100, { ExtendedChartData } from 'chartjs-plugin-stacked100'
 
-export function ensureTooltipElement(): HTMLElement {
+let tooltipRoot: Root
+
+export function ensureTooltip(): [Root, HTMLElement] {
     let tooltipEl = document.getElementById('InsightTooltipWrapper')
-    if (!tooltipEl) {
-        tooltipEl = document.createElement('div')
-        tooltipEl.id = 'InsightTooltipWrapper'
-        tooltipEl.classList.add('InsightTooltipWrapper')
-        tooltipEl.style.display = 'none'
-        document.body.appendChild(tooltipEl)
+
+    if (!tooltipEl || !tooltipRoot) {
+        if (!tooltipEl) {
+            tooltipEl = document.createElement('div')
+            tooltipEl.id = 'InsightTooltipWrapper'
+            tooltipEl.classList.add('InsightTooltipWrapper')
+            tooltipEl.style.display = 'none'
+            document.body.appendChild(tooltipEl)
+        }
+
+        tooltipRoot = createRoot(tooltipEl)
     }
-    return tooltipEl
+    return [tooltipRoot, tooltipEl]
 }
 
 function truncateString(str: string, num: number): string {
@@ -441,7 +448,7 @@ export function LineGraph_({
                             return
                         }
 
-                        const tooltipEl = ensureTooltipElement()
+                        const [tooltipRoot, tooltipEl] = ensureTooltip()
                         if (tooltip.opacity === 0) {
                             tooltipEl.style.opacity = '0'
                             return
@@ -468,7 +475,7 @@ export function LineGraph_({
                                 )
                             })
 
-                            ReactDOM.render(
+                            tooltipRoot.render(
                                 <InsightTooltip
                                     date={dataset?.days?.[tooltip.dataPoints?.[0]?.dataIndex]}
                                     timezone={timezone}
@@ -524,8 +531,7 @@ export function LineGraph_({
                                             : aggregationLabel(labelGroupType).plural
                                     }
                                     {...tooltipConfig}
-                                />,
-                                tooltipEl
+                                />
                             )
                         }
 

frontend/src/scenes/insights/views/LineGraph/PieChart.tsx

@@ -15,13 +15,12 @@ import { areObjectValuesEmpty } from '~/lib/utils'
 import { GraphType } from '~/types'
 import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
 import {
-    ensureTooltipElement,
+    ensureTooltip,
     filterNestedDataset,
     LineGraphProps,
     onChartClick,
     onChartHover,
 } from 'scenes/insights/views/LineGraph/LineGraph'
-import ReactDOM from 'react-dom'
 import { InsightTooltip } from 'scenes/insights/InsightTooltip/InsightTooltip'
 import { useActions, useValues } from 'kea'
 import { groupsModel } from '~/models/groupsModel'
@@ -177,7 +176,7 @@ export function PieChart({
                                 return
                             }
 
-                            const tooltipEl = ensureTooltipElement()
+                            const [tooltipRoot, tooltipEl] = ensureTooltip()
                             if (tooltip.opacity === 0) {
                                 // remove highlight from the legend
                                 if (trendsFilter?.show_legend) {
@@ -204,7 +203,7 @@ export function PieChart({
 
                                 highlightSeries(seriesData[0].dataIndex)
 
-                                ReactDOM.render(
+                                tooltipRoot.render(
                                     <InsightTooltip
                                         seriesData={seriesData}
                                         hideColorCol={!!tooltipConfig?.hideColorCol}
@@ -250,8 +249,7 @@ export function PieChart({
                                                 : aggregationLabel(labelGroupType).plural
                                         }
                                         {...tooltipConfig}
-                                    />,
-                                    tooltipEl
+                                    />
                                 )
                             }