From da154b5a93d7505b0fa994753851c27af385a347 Mon Sep 17 00:00:00 2001
From: GitStart-SourceGraph
 <89894075+gitstart-sourcegraph@users.noreply.github.com>
Date: Fri, 15 Jul 2022 11:58:08 +0800
Subject: [PATCH] [SG-33302] Upgrade to the latest react version and migrate to
 the new root API (#36045)

* feat: react v18 and new root api with some errors fixes

* web: repo page integration test flake fix (#37592)

* web: fix `blog-viewer` integration test flake (#38069)

* fix: build-ts

* fix: new failing unit tests

* fix: unit test

* web: fix search integration test

* feat: applied request changes

* fix: new failing test because of global mockReactVisibilitySensor

* fix: unexpected onLayoutChange call on SmartInsightsViewGrid

* fix: make ForwardReferenceComponent support custom children

* fix: more new ts lint issue

* fix: remaining issue BatchSpec

* fix: SmartInsightsViewGrid issue with useLayoutEffect

Co-authored-by: gitstart-sourcegraph <gitstart@users.noreply.github.com>
Co-authored-by: Valery Bugakov <skymk1@gmail.com>
---
 .../branded/src/components/BrandedStory.tsx   |   6 +-
 .../components/panel/TabbedPanelContent.tsx   |   4 +-
 .../scripts/afterInstallPage.main.tsx         |   6 +-
 .../scripts/optionsPage.main.tsx              |   6 +-
 .../src/shared/code-hosts/github/codeHost.tsx |   8 +-
 .../src/shared/code-hosts/shared/codeHost.tsx |  13 +-
 .../shared/code-hosts/shared/extensions.tsx   |   4 +-
 .../src/components/CodeExcerpt.test.tsx       |  25 +--
 .../src/components/FileMatchChildren.test.tsx |   9 +-
 .../src/components/FileMatchChildren.tsx      |   2 +-
 .../src/components/FileSearchResult.test.tsx  |   9 +-
 .../src/components/ResultContainer.tsx        |  10 +-
 .../src/documentation/ModalVideo.tsx          |   4 +-
 .../search-ui/src/results/NoResultsPage.tsx   |   2 +-
 .../src/results/sidebar/SearchReference.tsx   |   4 +-
 .../src/results/sidebar/SearchSidebar.tsx     |   4 +-
 .../results/sidebar/SearchSidebarSection.tsx  |  44 ++---
 .../src/results/sidebar/helpers.test.ts       |   2 +-
 .../src/results/use-items-to-show.test.ts     |   2 +-
 .../shared/dev/mockReactVisibilitySensor.tsx  |  27 +++
 client/shared/src/actions/ActionItem.test.tsx |   5 +-
 .../shared/src/actions/ActionsContainer.tsx   |   2 +-
 .../__snapshots__/ActionItem.test.tsx.snap    |  14 +-
 client/shared/src/components/VirtualList.tsx  |   2 +-
 .../utils/linkClickHandler.test.tsx           |  20 +-
 .../temporary/useTemporarySetting.test.tsx    |   3 +-
 .../testing/render-with-branded-context.tsx   |   7 +-
 .../src/util/useInputValidation.test.ts       |   2 +-
 .../webview/search-panel/SearchHomeView.tsx   |   2 +-
 .../search-panel/SearchResultsView.tsx        |   2 +-
 .../search-panel/alias/FileMatchChildren.tsx  |   2 +-
 .../vscode/src/webview/search-panel/index.tsx |   9 +-
 .../src/webview/sidebars/help/index.tsx       |   6 +-
 .../src/webview/sidebars/search/index.tsx     |   9 +-
 client/web/src/SourcegraphWebApp.tsx          |   7 +-
 .../core/components/tooltip/Tooltip.tsx       |   2 +-
 client/web/src/components/Collapsible.tsx     |   4 +-
 client/web/src/components/ErrorBoundary.tsx   |   2 +-
 client/web/src/components/PageTitle.tsx       |   2 +-
 client/web/src/components/WebStory.tsx        |  10 +-
 .../components/diff/FileDiffConnection.tsx    |   2 +-
 .../web/src/components/diff/FileDiffNode.tsx  |   4 +-
 .../externalServices/externalServices.tsx     |   8 +-
 .../web/src/enterprise/batches/BatchSpec.tsx  |  15 +-
 .../WorkspacesPreview.story.tsx               |  32 ++--
 .../batch-spec/execute/ActionsMenu.story.tsx  |  16 +-
 .../batch-spec/execute/ActionsMenu.tsx        |   2 +-
 .../create/OldCreateBatchChangeContent.tsx    |   2 +-
 .../create/SearchTemplatesBanner.story.tsx    |   4 +-
 .../components/DeleteMonitorModal.tsx         |   6 +-
 .../pages/CodeIntelConfigurationPage.tsx      |   7 +-
 .../CodeIntelConfigurationPolicyPage.tsx      |   7 +-
 .../indexes/pages/CodeIntelIndexesPage.tsx    |  14 +-
 .../uploads/pages/CodeIntelUploadsPage.tsx    |  11 +-
 client/web/src/enterprise/embed/main.tsx      |   6 +-
 .../CodeInsightsCreationActions.tsx           |   2 +-
 .../live-preview/LivePreviewCard.tsx          |   2 +-
 .../components/form/getDefaultInputProps.ts   |   2 +-
 .../SmartInsightsViewGrid.tsx                 |   4 +-
 .../SortFilterSeriesPanel.tsx                 |   7 +-
 .../use-prallel-requests.test.ts              |   2 +-
 .../insights/hooks/use-ui-features.test.tsx   |   2 +-
 .../InsightsDashboardCreationContent.tsx      |   4 +-
 .../DashboardsContentPage.test.tsx            |   4 +-
 .../insights/creation/ComputeLivePreview.tsx  |   2 +-
 .../creation/LineChartLivePreview.tsx         |   4 +-
 .../LangStatsInsightLivePreview.tsx           |   4 +-
 client/web/src/enterprise/main.tsx            |   6 +-
 .../organizations/EarlyAccessOrgsCodeForm.tsx |   7 +-
 .../ProductCertificate.tsx                    |   8 +-
 .../searchContexts/SearchContextForm.tsx      |   2 +-
 .../ProductSubscriptionForm.tsx               |   2 +-
 .../user/settings/ExternalAccountNode.tsx     |   8 +-
 .../RegistryExtensionContributionsPage.tsx    |   2 +-
 .../src/featureFlags/FeatureFlagsProvider.tsx |  10 +-
 .../src/featureFlags/useFeatureFlag.test.tsx  | 108 ++++++-----
 client/web/src/integration/batches.test.ts    |   1 +
 .../web/src/integration/blob-viewer.test.ts   |  17 +-
 client/web/src/integration/nav.test.ts        |   8 +
 client/web/src/integration/profile.test.ts    |   2 +-
 client/web/src/integration/repository.test.ts |  29 +--
 client/web/src/integration/search.test.ts     |   4 +
 client/web/src/main.tsx                       |   6 +-
 client/web/src/nav/GlobalNavbar.tsx           |   2 +-
 client/web/src/nav/UserNavItem.story.tsx      |   8 +-
 client/web/src/repo/blob/Blob.tsx             |  18 +-
 client/web/src/repo/blob/BlobPage.tsx         |   3 +-
 .../src/repo/commit/RepositoryCommitPage.tsx  |   9 +-
 client/web/src/repo/commits/GitCommitNode.tsx |   4 +-
 .../repo/settings/RepoSettingsMirrorPage.tsx  |   6 +-
 .../settings/components/ActionContainer.tsx   |  14 +-
 .../src/savedSearches/SavedSearchListPage.tsx |   9 +-
 client/web/src/search/helpers.tsx             |   2 +-
 client/web/src/site-admin/SiteAdminArea.tsx   |   2 +-
 .../SiteAdminFeatureFlagConfigurationPage.tsx |   2 +-
 .../components/AnalyticsPageTitle.tsx         |   2 +-
 client/web/src/stores/notepad.test.ts         |   2 +-
 client/web/src/theme.test.ts                  |   2 +-
 .../src/tour/components/Tour/TourContent.tsx  |   8 +-
 .../src/tour/components/Tour/useTour.test.tsx |   6 +-
 client/web/src/tracking/withActivation.tsx    |   2 +-
 client/web/src/types/graphiql/index.d.ts      |   2 +-
 .../src/types/react-scroll-manager/index.d.ts |  20 ++
 .../codeHosts/AddCodeHostConnectionModal.tsx  |   2 +-
 .../UpdateCodeHostConnectionModal.tsx         |   2 +-
 .../user/settings/codeHosts/modalHints.tsx    |   4 +-
 .../settings/profile/EditUserProfileForm.tsx  |   2 +-
 .../src/components/Collapse/Collapse.tsx      |   6 +-
 .../FeedbackPrompt/FeedbackPrompt.story.tsx   |   2 +-
 .../FeedbackPrompt/FeedbackPrompt.tsx         |   2 +-
 .../FeedbackPrompt.test.tsx.snap              |  20 +-
 .../src/components/Tabs/Tabs.story.tsx        |   7 +-
 .../src/components/Tooltip/Tooltip.test.tsx   |  11 +-
 .../wildcard/src/hooks/useObservable.test.ts  |  13 +-
 client/wildcard/src/hooks/useObservable.ts    |   4 +-
 .../src/hooks/useTimeoutManager.test.ts       |   2 +-
 client/wildcard/src/types.ts                  |   6 +-
 package.json                                  |  20 +-
 yarn.lock                                     | 180 ++++++------------
 119 files changed, 576 insertions(+), 528 deletions(-)
 create mode 100644 client/shared/dev/mockReactVisibilitySensor.tsx
 create mode 100644 client/web/src/types/react-scroll-manager/index.d.ts

diff --git a/client/branded/src/components/BrandedStory.tsx b/client/branded/src/components/BrandedStory.tsx
index 30092241462..1e87cffe982 100644
--- a/client/branded/src/components/BrandedStory.tsx
+++ b/client/branded/src/components/BrandedStory.tsx
@@ -11,7 +11,9 @@ import { DeprecatedTooltip, WildcardThemeContext } from '@sourcegraph/wildcard'
 
 import brandedStyles from '../global-styles/index.scss'
 
-export interface BrandedProps extends MemoryRouterProps, Pick<MockedStoryProviderProps, 'mocks' | 'useStrictMocking'> {
+export interface BrandedProps
+    extends Omit<MemoryRouterProps, 'children'>,
+        Pick<MockedStoryProviderProps, 'mocks' | 'useStrictMocking'> {
     children: React.FunctionComponent<React.PropsWithChildren<ThemeProps>>
     styles?: string
 }
@@ -20,7 +22,7 @@ export interface BrandedProps extends MemoryRouterProps, Pick<MockedStoryProvide
  * Wrapper component for branded Storybook stories that provides light theme and react-router props.
  * Takes a render function as children that gets called with the props.
  */
-export const BrandedStory: React.FunctionComponent<React.PropsWithChildren<BrandedProps>> = ({
+export const BrandedStory: React.FunctionComponent<BrandedProps> = ({
     children: Children,
     styles = brandedStyles,
     mocks,
diff --git a/client/branded/src/components/panel/TabbedPanelContent.tsx b/client/branded/src/components/panel/TabbedPanelContent.tsx
index 259eb396d0a..37e88482ac8 100644
--- a/client/branded/src/components/panel/TabbedPanelContent.tsx
+++ b/client/branded/src/components/panel/TabbedPanelContent.tsx
@@ -60,7 +60,7 @@ export interface PanelViewWithComponent extends PanelViewData {
     /**
      * The React element to render in the panel view.
      */
-    reactElement?: React.ReactFragment
+    reactElement?: React.ReactNode
 
     // Should the content of the panel be put inside a wrapper container with padding or not.
     noWrapper?: boolean
@@ -75,7 +75,7 @@ export interface PanelViewWithComponent extends PanelViewData {
 interface TabbedPanelItem {
     id: string
 
-    label: React.ReactFragment
+    label: React.ReactNode
     /**
      * Controls the relative order of panel items. The items are laid out from highest priority (at the beginning)
      * to lowest priority (at the end). The default is 0.
diff --git a/client/browser/src/browser-extension/scripts/afterInstallPage.main.tsx b/client/browser/src/browser-extension/scripts/afterInstallPage.main.tsx
index 9775bcfefcf..8edb2002c0b 100644
--- a/client/browser/src/browser-extension/scripts/afterInstallPage.main.tsx
+++ b/client/browser/src/browser-extension/scripts/afterInstallPage.main.tsx
@@ -3,7 +3,7 @@ import '../../shared/polyfills'
 
 import React from 'react'
 
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { AnchorLink, setLinkComponent } from '@sourcegraph/wildcard'
 
@@ -23,4 +23,6 @@ const AfterInstallPage: React.FunctionComponent<React.PropsWithChildren<unknown>
     </ThemeWrapper>
 )
 
-render(<AfterInstallPage />, document.querySelector('#root'))
+const root = createRoot(document.querySelector('#root')!)
+
+root.render(<AfterInstallPage />)
diff --git a/client/browser/src/browser-extension/scripts/optionsPage.main.tsx b/client/browser/src/browser-extension/scripts/optionsPage.main.tsx
index 4a6dd80a473..0732d49159b 100644
--- a/client/browser/src/browser-extension/scripts/optionsPage.main.tsx
+++ b/client/browser/src/browser-extension/scripts/optionsPage.main.tsx
@@ -4,7 +4,7 @@ import '../../shared/polyfills'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { trimEnd, uniq } from 'lodash'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { from, noop, Observable, of } from 'rxjs'
 import { catchError, distinctUntilChanged, filter, map, mapTo } from 'rxjs/operators'
 import { Optional } from 'utility-types'
@@ -275,7 +275,9 @@ const Options: React.FunctionComponent<React.PropsWithChildren<unknown>> = () =>
 }
 
 const inject = (): void => {
-    render(<Options />, document.body)
+    const root = createRoot(document.body)
+
+    root.render(<Options />)
 }
 
 document.addEventListener('DOMContentLoaded', inject)
diff --git a/client/browser/src/shared/code-hosts/github/codeHost.tsx b/client/browser/src/shared/code-hosts/github/codeHost.tsx
index 7cd2ccf975f..c9091c2deb3 100644
--- a/client/browser/src/shared/code-hosts/github/codeHost.tsx
+++ b/client/browser/src/shared/code-hosts/github/codeHost.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import { trimStart } from 'lodash'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { defer, fromEvent, of } from 'rxjs'
 import { distinctUntilChanged, filter, map, startWith } from 'rxjs/operators'
 import { Omit } from 'utility-types'
@@ -552,8 +552,9 @@ function enhanceSearchPage(sourcegraphURL: string): void {
             utm_source: getPlatformName(),
             utm_campaign: utmCampaign,
         })
+        const root = createRoot(container)
 
-        render(
+        root.render(
             <SourcegraphIconButton
                 label="Search on Sourcegraph"
                 title="Search on Sourcegraph to get hover tooltips, go to definition and more"
@@ -570,8 +571,7 @@ function enhanceSearchPage(sourcegraphURL: string): void {
                         searchQuery ? `&q=${searchQuery}` : ''
                     }`
                 }}
-            />,
-            container
+            />
         )
     }
 
diff --git a/client/browser/src/shared/code-hosts/shared/codeHost.tsx b/client/browser/src/shared/code-hosts/shared/codeHost.tsx
index b8aabb1cf16..a1198495572 100644
--- a/client/browser/src/shared/code-hosts/shared/codeHost.tsx
+++ b/client/browser/src/shared/code-hosts/shared/codeHost.tsx
@@ -3,7 +3,8 @@ import * as React from 'react'
 import classNames from 'classnames'
 import * as H from 'history'
 import { isEqual } from 'lodash'
-import { render as reactDOMRender, Renderer } from 'react-dom'
+import { Renderer } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import {
     asyncScheduler,
     combineLatest,
@@ -1604,8 +1605,14 @@ export function injectCodeIntelligenceToCodeHost(
     // Flag to hide the actions in the code view toolbar (hide ActionNavItems) leaving only the "Open on Sourcegraph" button in the toolbar.
     const hideActions = codeHost.type === 'gerrit'
 
-    const renderWithThemeProvider = (element: React.ReactNode, container: Element | null): void =>
-        reactDOMRender(<WildcardThemeProvider isBranded={false}>{element}</WildcardThemeProvider>, container)
+    const renderWithThemeProvider = (element: React.ReactNode, container: Element | null): void => {
+        if (!container) {
+            return
+        }
+
+        const root = createRoot(container)
+        root.render(<WildcardThemeProvider isBranded={false}>{element}</WildcardThemeProvider>)
+    }
 
     subscriptions.add(
         // eslint-disable-next-line rxjs/no-async-subscribe, @typescript-eslint/no-misused-promises
diff --git a/client/browser/src/shared/code-hosts/shared/extensions.tsx b/client/browser/src/shared/code-hosts/shared/extensions.tsx
index 8414232e8ae..c9c713ab4f5 100644
--- a/client/browser/src/shared/code-hosts/shared/extensions.tsx
+++ b/client/browser/src/shared/code-hosts/shared/extensions.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import * as H from 'history'
 import { isEqual } from 'lodash'
-import { render } from 'react-dom'
+import { Renderer } from 'react-dom'
 
 import { ContributableMenu } from '@sourcegraph/client-api'
 import { DiffPart } from '@sourcegraph/codeintellify'
@@ -51,7 +51,7 @@ interface InjectProps
     extends PlatformContextProps<'forceUpdateTooltip' | 'settings' | 'sideloadedExtensionURL' | 'sourcegraphURL'>,
         ExtensionsControllerProps {
     history: H.History
-    render: typeof render
+    render: Renderer
 }
 
 interface RenderCommandPaletteProps
diff --git a/client/search-ui/src/components/CodeExcerpt.test.tsx b/client/search-ui/src/components/CodeExcerpt.test.tsx
index c16d81485ef..8d8fe9ddccb 100644
--- a/client/search-ui/src/components/CodeExcerpt.test.tsx
+++ b/client/search-ui/src/components/CodeExcerpt.test.tsx
@@ -1,7 +1,4 @@
-import * as React from 'react'
-
 import { cleanup, getByText, render } from '@testing-library/react'
-import _VisibilitySensor from 'react-visibility-sensor'
 import { of } from 'rxjs'
 import { map } from 'rxjs/operators'
 
@@ -10,28 +7,10 @@ import {
     HIGHLIGHTED_FILE_LINES_LONG,
     HIGHLIGHTED_FILE_LINES_SIMPLE,
 } from '@sourcegraph/shared/src/testing/searchTestHelpers'
+import '@sourcegraph/shared/dev/mockReactVisibilitySensor'
 
 import { CodeExcerpt } from './CodeExcerpt'
 
-export class MockVisibilitySensor extends React.Component<{ onChange?: (isVisible: boolean) => void }> {
-    constructor(props: { onChange?: (isVisible: boolean) => void }) {
-        super(props)
-        if (props.onChange) {
-            props.onChange(true)
-        }
-    }
-
-    public render(): JSX.Element {
-        return <>{this.props.children}</>
-    }
-}
-
-jest.mock('react-visibility-sensor', (): typeof _VisibilitySensor => ({ children, onChange }) => (
-    <>
-        <MockVisibilitySensor onChange={onChange}>{children}</MockVisibilitySensor>
-    </>
-))
-
 describe('CodeExcerpt', () => {
     afterAll(cleanup)
 
@@ -66,7 +45,7 @@ describe('CodeExcerpt', () => {
         // at least exist.
         const { container } = render(<CodeExcerpt {...defaultProps} />)
         const dataLines = container.querySelectorAll('[data-line]')
-        expect(dataLines.length).toMatchInlineSnapshot('3')
+        expect(dataLines).toHaveLength(3)
     })
 
     it('renders the code portion of each row', () => {
diff --git a/client/search-ui/src/components/FileMatchChildren.test.tsx b/client/search-ui/src/components/FileMatchChildren.test.tsx
index 0457699bb2e..f67f195e87a 100644
--- a/client/search-ui/src/components/FileMatchChildren.test.tsx
+++ b/client/search-ui/src/components/FileMatchChildren.test.tsx
@@ -1,6 +1,5 @@
 import { cleanup } from '@testing-library/react'
 import * as H from 'history'
-import _VisibilitySensor from 'react-visibility-sensor'
 import { of } from 'rxjs'
 import sinon from 'sinon'
 
@@ -12,16 +11,10 @@ import {
     NOOP_SETTINGS_CASCADE,
     HIGHLIGHTED_FILE_LINES,
 } from '@sourcegraph/shared/src/testing/searchTestHelpers'
+import '@sourcegraph/shared/dev/mockReactVisibilitySensor'
 
-import { MockVisibilitySensor } from './CodeExcerpt.test'
 import { FileMatchChildren } from './FileMatchChildren'
 
-jest.mock('react-visibility-sensor', (): typeof _VisibilitySensor => ({ children, onChange }) => (
-    <>
-        <MockVisibilitySensor onChange={onChange}>{children}</MockVisibilitySensor>
-    </>
-))
-
 const history = H.createBrowserHistory()
 history.replace({ pathname: '/search' })
 
diff --git a/client/search-ui/src/components/FileMatchChildren.tsx b/client/search-ui/src/components/FileMatchChildren.tsx
index 5bf63591242..d9b40f429f2 100644
--- a/client/search-ui/src/components/FileMatchChildren.tsx
+++ b/client/search-ui/src/components/FileMatchChildren.tsx
@@ -166,7 +166,7 @@ export const FileMatchChildren: React.FunctionComponent<React.PropsWithChildren<
     } = props
 
     const fetchHighlightedFileRangeLines = React.useCallback(
-        (isFirst, startLine, endLine) => {
+        (isFirst: boolean, startLine: number, endLine: number) => {
             const startTime = Date.now()
             return fetchHighlightedFileLineRanges(
                 {
diff --git a/client/search-ui/src/components/FileSearchResult.test.tsx b/client/search-ui/src/components/FileSearchResult.test.tsx
index 4991664176d..563bdaf111b 100644
--- a/client/search-ui/src/components/FileSearchResult.test.tsx
+++ b/client/search-ui/src/components/FileSearchResult.test.tsx
@@ -1,7 +1,6 @@
 import { cleanup, getAllByTestId, getByTestId } from '@testing-library/react'
 import { createBrowserHistory } from 'history'
 import FileIcon from 'mdi-react/FileIcon'
-import _VisibilitySensor from 'react-visibility-sensor'
 import sinon from 'sinon'
 
 import { MatchGroup } from '@sourcegraph/shared/src/components/ranking/PerFileResultRanking'
@@ -13,16 +12,10 @@ import {
     NOOP_SETTINGS_CASCADE,
     RESULT,
 } from '@sourcegraph/shared/src/testing/searchTestHelpers'
+import '@sourcegraph/shared/dev/mockReactVisibilitySensor'
 
-import { MockVisibilitySensor } from './CodeExcerpt.test'
 import { FileSearchResult, limitGroup } from './FileSearchResult'
 
-jest.mock('react-visibility-sensor', (): typeof _VisibilitySensor => ({ children, onChange }) => (
-    <>
-        <MockVisibilitySensor onChange={onChange}>{children}</MockVisibilitySensor>
-    </>
-))
-
 describe('FileSearchResult', () => {
     afterAll(cleanup)
     const history = createBrowserHistory()
diff --git a/client/search-ui/src/components/ResultContainer.tsx b/client/search-ui/src/components/ResultContainer.tsx
index 852d7fcba99..abdef5ff301 100644
--- a/client/search-ui/src/components/ResultContainer.tsx
+++ b/client/search-ui/src/components/ResultContainer.tsx
@@ -37,7 +37,7 @@ export interface ResultContainerProps {
     /**
      * The title component.
      */
-    title: React.ReactFragment
+    title: React.ReactNode
 
     /**
      * CSS class name to apply to the title element.
@@ -45,20 +45,18 @@ export interface ResultContainerProps {
     titleClassName?: string
 
     /** The content to display next to the title. */
-    description?: React.ReactFragment
+    description?: React.ReactNode
 
     /**
      * The content of the result displayed underneath the result container's
      * header when collapsed.
      */
-    collapsedChildren?: React.ReactFragment
-
+    collapsedChildren?: React.ReactNode
     /**
      * The content of the result displayed underneath the result container's
      * header when expanded.
      */
-    expandedChildren?: React.ReactFragment
-
+    expandedChildren?: React.ReactNode
     /**
      * The label to display next to the collapse button
      */
diff --git a/client/search-ui/src/documentation/ModalVideo.tsx b/client/search-ui/src/documentation/ModalVideo.tsx
index 41dd8b5246f..c8cbe369729 100644
--- a/client/search-ui/src/documentation/ModalVideo.tsx
+++ b/client/search-ui/src/documentation/ModalVideo.tsx
@@ -32,7 +32,7 @@ export const ModalVideo: React.FunctionComponent<React.PropsWithChildren<ModalVi
 }) => {
     const [isOpen, setIsOpen] = useState(false)
     const toggleDialog = useCallback(
-        isOpen => {
+        (isOpen: boolean) => {
             setIsOpen(isOpen)
             if (onToggle) {
                 onToggle(isOpen)
@@ -88,7 +88,7 @@ export const ModalVideo: React.FunctionComponent<React.PropsWithChildren<ModalVi
                             <Button
                                 variant="icon"
                                 className="p-1"
-                                data-testId="modal-video-close"
+                                data-testid="modal-video-close"
                                 onClick={() => toggleDialog(false)}
                                 aria-label="Close"
                             >
diff --git a/client/search-ui/src/results/NoResultsPage.tsx b/client/search-ui/src/results/NoResultsPage.tsx
index ac7e906c10f..a761cfa63ce 100644
--- a/client/search-ui/src/results/NoResultsPage.tsx
+++ b/client/search-ui/src/results/NoResultsPage.tsx
@@ -189,7 +189,7 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
     const [hiddenSectionIDs, setHiddenSectionIds] = useTemporarySetting('search.hiddenNoResultsSections')
 
     const onClose = useCallback(
-        sectionID => {
+        (sectionID: SectionID) => {
             telemetryService.log('NoResultsPanel', { panelID: sectionID, action: 'closed' })
             setHiddenSectionIds((hiddenSectionIDs = []) =>
                 !hiddenSectionIDs.includes(sectionID) ? [...hiddenSectionIDs, sectionID] : hiddenSectionIDs
diff --git a/client/search-ui/src/results/sidebar/SearchReference.tsx b/client/search-ui/src/results/sidebar/SearchReference.tsx
index 89d4fc84f69..bc21f392969 100644
--- a/client/search-ui/src/results/sidebar/SearchReference.tsx
+++ b/client/search-ui/src/results/sidebar/SearchReference.tsx
@@ -404,7 +404,7 @@ const SearchReferenceEntry = <T extends SearchReferenceInfo>({
     const [collapsed, setCollapsed] = useState(true)
     const collapseIcon = collapsed ? mdiChevronLeft : mdiChevronDown
 
-    const handleOpenChange = useCallback(collapsed => setCollapsed(!collapsed), [])
+    const handleOpenChange = useCallback((collapsed: boolean) => setCollapsed(!collapsed), [])
 
     let buttonTextPrefix: ReactElement | null = null
     if (isFilterInfo(searchReference)) {
@@ -620,6 +620,6 @@ const SearchReference = React.memo(
 
 export function getSearchReferenceFactory(
     props: Omit<SearchReferenceProps, 'filter'>
-): (filter: string) => ReactElement {
+): (filter: string) => React.ReactNode {
     return (filter: string) => <SearchReference {...props} filter={filter} />
 }
diff --git a/client/search-ui/src/results/sidebar/SearchSidebar.tsx b/client/search-ui/src/results/sidebar/SearchSidebar.tsx
index a37ed39fbff..cf773357585 100644
--- a/client/search-ui/src/results/sidebar/SearchSidebar.tsx
+++ b/client/search-ui/src/results/sidebar/SearchSidebar.tsx
@@ -41,12 +41,12 @@ export interface SearchSidebarProps
     /**
      * Not yet implemented in the VS Code extension (blocked on Apollo Client integration).
      */
-    getRevisions?: (revisionsProps: Omit<RevisionsProps, 'query'>) => (query: string) => JSX.Element
+    getRevisions?: (revisionsProps: Omit<RevisionsProps, 'query'>) => (query: string) => React.ReactNode
 
     /**
      * Content to render inside sidebar, but before other sections.
      */
-    prefixContent?: JSX.Element
+    prefixContent?: React.ReactNode
 
     buildSearchURLQueryFromQueryState: (queryParameters: BuildSearchQueryURLParameters) => string
 
diff --git a/client/search-ui/src/results/sidebar/SearchSidebarSection.tsx b/client/search-ui/src/results/sidebar/SearchSidebarSection.tsx
index b4627e37bec..3b8d5f1916e 100644
--- a/client/search-ui/src/results/sidebar/SearchSidebarSection.tsx
+++ b/client/search-ui/src/results/sidebar/SearchSidebarSection.tsx
@@ -10,28 +10,26 @@ import { FilterLink, FilterLinkProps } from './FilterLink'
 
 import styles from './SearchSidebarSection.module.scss'
 
-export const SearchSidebarSection: React.FunctionComponent<
-    React.PropsWithChildren<{
-        sectionId: string
-        header: string
-        children?: React.ReactElement | React.ReactElement[] | ((filter: string) => React.ReactElement)
-        className?: string
-        showSearch?: boolean // Search only works if children are FilterLink
-        onToggle?: (id: string, open: boolean) => void
-        startCollapsed?: boolean
-        /**
-         * Shown when the built-in search doesn't find any results.
-         */
-        noResultText?: React.ReactElement | string
-        /**
-         * Clear the search input whenever this value changes. This is supposed to
-         * be used together with function children, which use the search input but
-         * handle search on their own.
-         * Defaults to the component's children.
-         */
-        clearSearchOnChange?: {}
-    }>
-> = React.memo(
+export const SearchSidebarSection: React.FunctionComponent<{
+    sectionId: string
+    header: string
+    children?: React.ReactNode | React.ReactNode[] | ((filter: string) => React.ReactNode)
+    className?: string
+    showSearch?: boolean // Search only works if children are FilterLink
+    onToggle?: (id: string, open: boolean) => void
+    startCollapsed?: boolean
+    /**
+     * Shown when the built-in search doesn't find any results.
+     */
+    noResultText?: React.ReactElement | string
+    /**
+     * Clear the search input whenever this value changes. This is supposed to
+     * be used together with function children, which use the search input but
+     * handle search on their own.
+     * Defaults to the component's children.
+     */
+    clearSearchOnChange?: {}
+}> = React.memo(
     ({
         sectionId,
         header,
@@ -93,7 +91,7 @@ export const SearchSidebarSection: React.FunctionComponent<
 
         const [isOpened, setOpened] = useState(!startCollapsed)
         const handleOpenChange = useCallback(
-            isOpen => {
+            (isOpen: boolean) => {
                 if (onToggle) {
                     onToggle(sectionId, isOpen)
                 }
diff --git a/client/search-ui/src/results/sidebar/helpers.test.ts b/client/search-ui/src/results/sidebar/helpers.test.ts
index 376dae41588..0dd05b33e3c 100644
--- a/client/search-ui/src/results/sidebar/helpers.test.ts
+++ b/client/search-ui/src/results/sidebar/helpers.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { FilterType } from '@sourcegraph/shared/src/search/query/filters'
 import { Filter } from '@sourcegraph/shared/src/search/stream'
diff --git a/client/search-ui/src/results/use-items-to-show.test.ts b/client/search-ui/src/results/use-items-to-show.test.ts
index f1318735ab7..efbf00b577c 100644
--- a/client/search-ui/src/results/use-items-to-show.test.ts
+++ b/client/search-ui/src/results/use-items-to-show.test.ts
@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks'
+import { act, renderHook } from '@testing-library/react'
 import { times } from 'lodash'
 
 import { INCREMENTAL_ITEMS_TO_SHOW, DEFAULT_INITIAL_ITEMS_TO_SHOW, useItemsToShow } from './use-items-to-show'
diff --git a/client/shared/dev/mockReactVisibilitySensor.tsx b/client/shared/dev/mockReactVisibilitySensor.tsx
new file mode 100644
index 00000000000..6853f004238
--- /dev/null
+++ b/client/shared/dev/mockReactVisibilitySensor.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+import _VisibilitySensor from 'react-visibility-sensor'
+
+type VisibilitySensorPropsType = React.ComponentProps<typeof _VisibilitySensor>
+
+export class MockVisibilitySensor extends React.Component<VisibilitySensorPropsType> {
+    constructor(props: { onChange?: (isVisible: boolean) => void }) {
+        super(props)
+        if (props.onChange) {
+            props.onChange(true)
+        }
+    }
+
+    public render(): JSX.Element {
+        return <>{this.props.children}</>
+    }
+}
+
+jest.mock(
+    'react-visibility-sensor',
+    (): typeof _VisibilitySensor => ({ children, onChange }: VisibilitySensorPropsType) => (
+        <>
+            <MockVisibilitySensor onChange={onChange}>{children}</MockVisibilitySensor>
+        </>
+    )
+)
diff --git a/client/shared/src/actions/ActionItem.test.tsx b/client/shared/src/actions/ActionItem.test.tsx
index ba9b9373d42..76264bb8fbe 100644
--- a/client/shared/src/actions/ActionItem.test.tsx
+++ b/client/shared/src/actions/ActionItem.test.tsx
@@ -185,7 +185,8 @@ describe('ActionItem', () => {
         // to result in the setState call.)
         userEvent.click(screen.getByRole('button'))
 
-        await new Promise<void>(resolve => setTimeout(resolve))
+        // we should wait for the button to be enabled again after got errors. Otherwise it will be flaky
+        await waitFor(() => expect(screen.getByLabelText('d')).toBeEnabled())
 
         expect(asFragment()).toMatchSnapshot()
     })
@@ -211,7 +212,7 @@ describe('ActionItem', () => {
         // to result in the setState call.)
         userEvent.click(screen.getByRole('button'))
 
-        await new Promise<void>(resolve => setTimeout(resolve))
+        await waitFor(() => expect(screen.getByLabelText('Error: x')).toBeInTheDocument())
 
         expect(asFragment()).toMatchSnapshot()
     })
diff --git a/client/shared/src/actions/ActionsContainer.tsx b/client/shared/src/actions/ActionsContainer.tsx
index 4b7f4a1c464..5afb2849ab8 100644
--- a/client/shared/src/actions/ActionsContainer.tsx
+++ b/client/shared/src/actions/ActionsContainer.tsx
@@ -39,7 +39,7 @@ interface Props extends ActionsProps, TelemetryProps {
 }
 
 /** Displays the actions in a container, with a wrapper and/or empty element. */
-export const ActionsContainer: React.FunctionComponent<React.PropsWithChildren<Props>> = props => {
+export const ActionsContainer: React.FunctionComponent<Props> = props => {
     const { scope, extraContext, returnInactiveMenuItems, extensionsController, menu, empty } = props
 
     const contributions = useObservable(
diff --git a/client/shared/src/actions/__snapshots__/ActionItem.test.tsx.snap b/client/shared/src/actions/__snapshots__/ActionItem.test.tsx.snap
index d78f0eec12c..7bff64b9214 100644
--- a/client/shared/src/actions/__snapshots__/ActionItem.test.tsx.snap
+++ b/client/shared/src/actions/__snapshots__/ActionItem.test.tsx.snap
@@ -228,8 +228,9 @@ exports[`ActionItem run command with showLoadingSpinnerDuringExecution 2`] = `
 <DocumentFragment>
   <button
     aria-label="d"
-    class="test-action-item"
+    class="test-action-item actionItemLoading"
     data-tooltip="d"
+    disabled=""
     type="button"
   >
     <img
@@ -237,6 +238,17 @@ exports[`ActionItem run command with showLoadingSpinnerDuringExecution 2`] = `
       src="u"
     />
      g: t 
+    <div
+      class="loader"
+      data-testid="action-item-spinner"
+    >
+      <div
+        aria-label="Loading"
+        aria-live="polite"
+        class="mdi-icon loadingSpinner"
+        role="img"
+      />
+    </div>
   </button>
 </DocumentFragment>
 `;
diff --git a/client/shared/src/components/VirtualList.tsx b/client/shared/src/components/VirtualList.tsx
index 5ec59c57f99..b72dd041d34 100644
--- a/client/shared/src/components/VirtualList.tsx
+++ b/client/shared/src/components/VirtualList.tsx
@@ -60,7 +60,7 @@ export class VirtualList<TItem, TExtraItemProps = undefined> extends React.PureC
             <Element className={this.props.className} ref={this.props.onRef} aria-label={this.props['aria-label']}>
                 {this.props.items.slice(0, this.props.itemsToShow).map((item, index) => (
                     <VisibilitySensor
-                        onChange={isVisible => this.onChangeVisibility(isVisible, index)}
+                        onChange={(isVisible: boolean) => this.onChangeVisibility(isVisible, index)}
                         key={this.props.itemKey(item)}
                         containment={this.props.containment}
                         partialVisibility={true}
diff --git a/client/shared/src/components/utils/linkClickHandler.test.tsx b/client/shared/src/components/utils/linkClickHandler.test.tsx
index 0cd9fa719a0..e8e7f3e94d6 100644
--- a/client/shared/src/components/utils/linkClickHandler.test.tsx
+++ b/client/shared/src/components/utils/linkClickHandler.test.tsx
@@ -1,7 +1,7 @@
 import assert from 'assert'
 
+import { render } from '@testing-library/react'
 import { createMemoryHistory } from 'history'
-import ReactDOM from 'react-dom'
 import * as sinon from 'sinon'
 
 import { Link } from '@sourcegraph/wildcard'
@@ -15,17 +15,14 @@ describe('createLinkClickHandler', () => {
         const history = createMemoryHistory({ initialEntries: [] })
         expect(history).toHaveLength(0)
 
-        const root = document.createElement('div')
-        document.body.append(root)
-        ReactDOM.render(
+        const { container } = render(
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div onClick={createLinkClickHandler(history)}>
                 <Link to="https://sourcegraph.test/else/where">Test</Link>
-            </div>,
-            root
+            </div>
         )
 
-        const anchor = root.querySelector('a')
+        const anchor = container.querySelector('a')
         assert(anchor)
 
         const spy = sinon.spy((_event: MouseEvent) => undefined)
@@ -45,17 +42,14 @@ describe('createLinkClickHandler', () => {
         const history = createMemoryHistory({ initialEntries: [] })
         expect(history).toHaveLength(0)
 
-        const root = document.createElement('div')
-        document.body.append(root)
-        ReactDOM.render(
+        const { container } = render(
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div onClick={createLinkClickHandler(history)}>
                 <Link to="https://github.com/some/where">Test</Link>
-            </div>,
-            root
+            </div>
         )
 
-        const anchor = root.querySelector('a')
+        const anchor = container.querySelector('a')
         assert(anchor)
 
         const spy = sinon.spy((_event: MouseEvent) => undefined)
diff --git a/client/shared/src/settings/temporary/useTemporarySetting.test.tsx b/client/shared/src/settings/temporary/useTemporarySetting.test.tsx
index 41a065a998f..f6768a47601 100644
--- a/client/shared/src/settings/temporary/useTemporarySetting.test.tsx
+++ b/client/shared/src/settings/temporary/useTemporarySetting.test.tsx
@@ -2,8 +2,7 @@ import { useEffect } from 'react'
 
 import { gql } from '@apollo/client'
 import { createMockClient } from '@apollo/client/testing'
-import { render } from '@testing-library/react'
-import { renderHook, act as actHook } from '@testing-library/react-hooks'
+import { render, renderHook, act as actHook } from '@testing-library/react'
 
 import { TemporarySettingsContext } from './TemporarySettingsProvider'
 import { InMemoryMockSettingsBackend, TemporarySettingsStorage } from './TemporarySettingsStorage'
diff --git a/client/shared/src/testing/render-with-branded-context.tsx b/client/shared/src/testing/render-with-branded-context.tsx
index 26a48a94d53..ec974e8293e 100644
--- a/client/shared/src/testing/render-with-branded-context.tsx
+++ b/client/shared/src/testing/render-with-branded-context.tsx
@@ -11,13 +11,18 @@ export interface RenderWithBrandedContextResult extends RenderResult {
     history: MemoryHistory
 }
 
+interface RenderWithBrandedContextOptions {
+    route?: string
+    history?: MemoryHistory<unknown>
+}
+
 const wildcardTheme: WildcardTheme = {
     isBranded: true,
 }
 
 export function renderWithBrandedContext(
     children: ReactNode,
-    { route = '/', history = createMemoryHistory({ initialEntries: [route] }) } = {}
+    { route = '/', history = createMemoryHistory({ initialEntries: [route] }) }: RenderWithBrandedContextOptions = {}
 ): RenderWithBrandedContextResult {
     return {
         ...render(
diff --git a/client/shared/src/util/useInputValidation.test.ts b/client/shared/src/util/useInputValidation.test.ts
index 2fba6901ab5..2574776d321 100644
--- a/client/shared/src/util/useInputValidation.test.ts
+++ b/client/shared/src/util/useInputValidation.test.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import { last, min, noop } from 'lodash'
 import { BehaviorSubject, Observable, of, Subject, Subscription } from 'rxjs'
 import { delay } from 'rxjs/operators'
diff --git a/client/vscode/src/webview/search-panel/SearchHomeView.tsx b/client/vscode/src/webview/search-panel/SearchHomeView.tsx
index d38a6d9a1b3..db6e7139c33 100644
--- a/client/vscode/src/webview/search-panel/SearchHomeView.tsx
+++ b/client/vscode/src/webview/search-panel/SearchHomeView.tsx
@@ -145,7 +145,7 @@ export const SearchHomeView: React.FunctionComponent<React.PropsWithChildren<Sea
     )
 
     const fetchStreamSuggestions = useCallback(
-        (query): Observable<SearchMatch[]> =>
+        (query: string): Observable<SearchMatch[]> =>
             wrapRemoteObservable(extensionCoreAPI.fetchStreamSuggestions(query, instanceURL)),
         [extensionCoreAPI, instanceURL]
     )
diff --git a/client/vscode/src/webview/search-panel/SearchResultsView.tsx b/client/vscode/src/webview/search-panel/SearchResultsView.tsx
index cd3cec6eef1..594fc57a511 100644
--- a/client/vscode/src/webview/search-panel/SearchResultsView.tsx
+++ b/client/vscode/src/webview/search-panel/SearchResultsView.tsx
@@ -244,7 +244,7 @@ export const SearchResultsView: React.FunctionComponent<React.PropsWithChildren<
     )
 
     const fetchStreamSuggestions = useCallback(
-        (query): Observable<SearchMatch[]> =>
+        (query: string): Observable<SearchMatch[]> =>
             wrapRemoteObservable(extensionCoreAPI.fetchStreamSuggestions(query, instanceURL)),
         [extensionCoreAPI, instanceURL]
     )
diff --git a/client/vscode/src/webview/search-panel/alias/FileMatchChildren.tsx b/client/vscode/src/webview/search-panel/alias/FileMatchChildren.tsx
index 98a781367bb..1ed8fbe12c8 100644
--- a/client/vscode/src/webview/search-panel/alias/FileMatchChildren.tsx
+++ b/client/vscode/src/webview/search-panel/alias/FileMatchChildren.tsx
@@ -169,7 +169,7 @@ export const FileMatchChildren: React.FunctionComponent<React.PropsWithChildren<
     const { openFile, openSymbol } = useOpenSearchResultsContext()
 
     const fetchHighlightedFileRangeLines = React.useCallback(
-        (isFirst, startLine, endLine) => {
+        (isFirst: boolean, startLine: number, endLine: number) => {
             const startTime = Date.now()
             return fetchHighlightedFileLineRanges(
                 {
diff --git a/client/vscode/src/webview/search-panel/index.tsx b/client/vscode/src/webview/search-panel/index.tsx
index 433df02d4e0..bc8c3d95d17 100644
--- a/client/vscode/src/webview/search-panel/index.tsx
+++ b/client/vscode/src/webview/search-panel/index.tsx
@@ -5,7 +5,7 @@ import React, { useMemo } from 'react'
 import { ShortcutProvider } from '@slimsag/react-shortcuts'
 import { VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react'
 import * as Comlink from 'comlink'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { MemoryRouter } from 'react-router'
 import { CompatRouter } from 'react-router-dom-v5-compat'
 
@@ -117,7 +117,9 @@ const Main: React.FC<React.PropsWithChildren<unknown>> = () => {
     )
 }
 
-render(
+const root = createRoot(document.querySelector('#root')!)
+
+root.render(
     <ShortcutProvider>
         <WildcardThemeContext.Provider value={{ isBranded: true }}>
             {/* Required for shared components that depend on `location`. */}
@@ -128,6 +130,5 @@ render(
             </MemoryRouter>
             <DeprecatedTooltip key={1} className="sourcegraph-tooltip" />
         </WildcardThemeContext.Provider>
-    </ShortcutProvider>,
-    document.querySelector('#root')
+    </ShortcutProvider>
 )
diff --git a/client/vscode/src/webview/sidebars/help/index.tsx b/client/vscode/src/webview/sidebars/help/index.tsx
index 6b4134a5241..47a7be068b1 100644
--- a/client/vscode/src/webview/sidebars/help/index.tsx
+++ b/client/vscode/src/webview/sidebars/help/index.tsx
@@ -4,7 +4,7 @@ import React, { useMemo } from 'react'
 
 import { VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react'
 import * as Comlink from 'comlink'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { wrapRemoteObservable } from '@sourcegraph/shared/src/api/client/api/common'
 import { AnchorLink, setLinkComponent, useObservable } from '@sourcegraph/wildcard'
@@ -51,4 +51,6 @@ const Main: React.FC<React.PropsWithChildren<unknown>> = () => {
     )
 }
 
-render(<Main />, document.querySelector('#root'))
+const root = createRoot(document.querySelector('#root')!)
+
+root.render(<Main />)
diff --git a/client/vscode/src/webview/sidebars/search/index.tsx b/client/vscode/src/webview/sidebars/search/index.tsx
index d49559ac2df..2821a64cb36 100644
--- a/client/vscode/src/webview/sidebars/search/index.tsx
+++ b/client/vscode/src/webview/sidebars/search/index.tsx
@@ -5,7 +5,7 @@ import React, { useMemo, useState } from 'react'
 import { ShortcutProvider } from '@slimsag/react-shortcuts'
 import { VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react'
 import * as Comlink from 'comlink'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect'
 
 import { wrapRemoteObservable } from '@sourcegraph/shared/src/api/client/api/common'
@@ -125,12 +125,13 @@ const Main: React.FC<React.PropsWithChildren<unknown>> = () => {
     )
 }
 
-render(
+const root = createRoot(document.querySelector('#root')!)
+
+root.render(
     <ShortcutProvider>
         <WildcardThemeContext.Provider value={{ isBranded: true }}>
             <Main />
             <DeprecatedTooltip key={1} className="sourcegraph-tooltip" />
         </WildcardThemeContext.Provider>
-    </ShortcutProvider>,
-    document.querySelector('#root')
+    </ShortcutProvider>
 )
diff --git a/client/web/src/SourcegraphWebApp.tsx b/client/web/src/SourcegraphWebApp.tsx
index 8bcbe6f4493..928531df47d 100644
--- a/client/web/src/SourcegraphWebApp.tsx
+++ b/client/web/src/SourcegraphWebApp.tsx
@@ -190,7 +190,10 @@ const history = createBrowserHistory()
 /**
  * The root component.
  */
-export class SourcegraphWebApp extends React.Component<SourcegraphWebAppProps, SourcegraphWebAppState> {
+export class SourcegraphWebApp extends React.Component<
+    React.PropsWithChildren<SourcegraphWebAppProps>,
+    SourcegraphWebAppState
+> {
     private readonly subscriptions = new Subscription()
     private readonly userRepositoriesUpdates = new Subject<void>()
     private readonly platformContext: PlatformContext = createPlatformContext()
@@ -311,7 +314,7 @@ export class SourcegraphWebApp extends React.Component<SourcegraphWebAppProps, S
         this.subscriptions.unsubscribe()
     }
 
-    public render(): React.ReactFragment | null {
+    public render(): React.ReactNode {
         if (window.pageError && window.pageError.statusCode !== 404) {
             const statusCode = window.pageError.statusCode
             const statusText = window.pageError.statusText
diff --git a/client/web/src/charts/core/components/tooltip/Tooltip.tsx b/client/web/src/charts/core/components/tooltip/Tooltip.tsx
index 22ba3c68d2c..29d06e3c9fb 100644
--- a/client/web/src/charts/core/components/tooltip/Tooltip.tsx
+++ b/client/web/src/charts/core/components/tooltip/Tooltip.tsx
@@ -8,7 +8,7 @@ import styles from './Tooltip.module.scss'
 
 const TOOLTIP_PADDING = createRectangle(0, 0, 10, 10)
 
-export const Tooltip: React.FunctionComponent = props => {
+export const Tooltip: React.FunctionComponent<React.PropsWithChildren<{}>> = props => {
     const [virtualElement, setVirtualElement] = useState<PopoverPoint | null>(null)
 
     useEffect(() => {
diff --git a/client/web/src/components/Collapsible.tsx b/client/web/src/components/Collapsible.tsx
index a0d534e8698..be50ac02b53 100644
--- a/client/web/src/components/Collapsible.tsx
+++ b/client/web/src/components/Collapsible.tsx
@@ -22,7 +22,7 @@ interface Props {
      * Optional children that appear below the title bar that can be expanded/collapsed. If present,
      * a button that expands or collapses the children will be shown.
      */
-    children?: React.ReactFragment
+    children?: React.ReactNode
 
     /**
      * Whether the children are expanded and visible by default.
@@ -50,7 +50,7 @@ interface Props {
  * Collapsible is an element with a title that is always displayed and children that are displayed
  * only when expanded.
  */
-export const Collapsible: React.FunctionComponent<React.PropsWithChildren<Props>> = ({
+export const Collapsible: React.FunctionComponent<Props> = ({
     title,
     detail,
     children,
diff --git a/client/web/src/components/ErrorBoundary.tsx b/client/web/src/components/ErrorBoundary.tsx
index 234f9c3ebe5..162145d80db 100644
--- a/client/web/src/components/ErrorBoundary.tsx
+++ b/client/web/src/components/ErrorBoundary.tsx
@@ -45,7 +45,7 @@ interface State {
  * Components should handle their own errors (and must not rely on this error boundary). This error
  * boundary is a last resort in case of an unexpected error.
  */
-export class ErrorBoundary extends React.PureComponent<Props, State> {
+export class ErrorBoundary extends React.PureComponent<React.PropsWithChildren<Props>, State> {
     public state: State = {}
 
     public static getDerivedStateFromError(error: any): Pick<State, 'error'> {
diff --git a/client/web/src/components/PageTitle.tsx b/client/web/src/components/PageTitle.tsx
index a3d8a9739dd..cfb44011052 100644
--- a/client/web/src/components/PageTitle.tsx
+++ b/client/web/src/components/PageTitle.tsx
@@ -16,7 +16,7 @@ const getBrandName = (): string => {
 
 let titleSet = false
 
-export const PageTitle: React.FunctionComponent<PageTitleProps> = ({ title }) => {
+export const PageTitle: React.FunctionComponent<React.PropsWithChildren<PageTitleProps>> = ({ title }) => {
     useEffect(() => {
         if (titleSet) {
             console.error('more than one PageTitle used at the same time')
diff --git a/client/web/src/components/WebStory.tsx b/client/web/src/components/WebStory.tsx
index 3a7cd6fd282..2e69c03f37e 100644
--- a/client/web/src/components/WebStory.tsx
+++ b/client/web/src/components/WebStory.tsx
@@ -22,11 +22,11 @@ if (!window.context) {
     window.context = {} as SourcegraphContext & Mocha.SuiteFunction
 }
 
-export interface WebStoryProps extends MemoryRouterProps, Pick<MockedStoryProviderProps, 'mocks' | 'useStrictMocking'> {
+export interface WebStoryProps
+    extends Omit<MemoryRouterProps, 'children'>,
+        Pick<MockedStoryProviderProps, 'mocks' | 'useStrictMocking'> {
     children: React.FunctionComponent<
-        React.PropsWithChildren<
-            ThemeProps & BreadcrumbSetters & BreadcrumbsProps & TelemetryProps & RouteComponentProps<any>
-        >
+        ThemeProps & BreadcrumbSetters & BreadcrumbsProps & TelemetryProps & RouteComponentProps<any>
     >
 }
 
@@ -34,7 +34,7 @@ export interface WebStoryProps extends MemoryRouterProps, Pick<MockedStoryProvid
  * Wrapper component for webapp Storybook stories that provides light theme and react-router props.
  * Takes a render function as children that gets called with the props.
  */
-export const WebStory: React.FunctionComponent<React.PropsWithChildren<WebStoryProps>> = ({
+export const WebStory: React.FunctionComponent<WebStoryProps> = ({
     children,
     mocks,
     useStrictMocking,
diff --git a/client/web/src/components/diff/FileDiffConnection.tsx b/client/web/src/components/diff/FileDiffConnection.tsx
index 3d61a413b54..3680f35db92 100644
--- a/client/web/src/components/diff/FileDiffConnection.tsx
+++ b/client/web/src/components/diff/FileDiffConnection.tsx
@@ -111,7 +111,7 @@ export const FileDiffConnection: React.FunctionComponent<React.PropsWithChildren
 
     const diffsUpdates = useMemo(() => new ReplaySubject<Connection<FileDiffFields> | ErrorLike | undefined>(1), [])
     const nextDiffsUpdate: FileDiffConnectionProps['onUpdate'] = useCallback(
-        fileDiffsOrError => diffsUpdates.next(fileDiffsOrError),
+        (fileDiffsOrError: Connection<FileDiffFields> | ErrorLike | undefined) => diffsUpdates.next(fileDiffsOrError),
         [diffsUpdates]
     )
 
diff --git a/client/web/src/components/diff/FileDiffNode.tsx b/client/web/src/components/diff/FileDiffNode.tsx
index 7d2e0e924c7..43eb945451c 100644
--- a/client/web/src/components/diff/FileDiffNode.tsx
+++ b/client/web/src/components/diff/FileDiffNode.tsx
@@ -59,7 +59,7 @@ export const FileDiffNode: React.FunctionComponent<React.PropsWithChildren<FileD
         setRenderDeleted(true)
     }, [])
 
-    let path: React.ReactFragment
+    let path: React.ReactNode
     if (node.newPath && (node.newPath === node.oldPath || !node.oldPath)) {
         path = <span title={node.newPath}>{node.newPath}</span>
     } else if (node.newPath && node.oldPath && node.newPath !== node.oldPath) {
@@ -76,7 +76,7 @@ export const FileDiffNode: React.FunctionComponent<React.PropsWithChildren<FileD
         path = <span title={node.oldPath!}>{node.oldPath}</span>
     }
 
-    let stat: React.ReactFragment
+    let stat: React.ReactNode
     // If one of the files was binary, display file size change instead of DiffStat.
     if (node.oldFile?.binary || node.newFile?.binary) {
         const sizeChange = (node.newFile?.byteSize ?? 0) - (node.oldFile?.byteSize ?? 0)
diff --git a/client/web/src/components/externalServices/externalServices.tsx b/client/web/src/components/externalServices/externalServices.tsx
index 230af20e3b4..1700ac1b0ef 100644
--- a/client/web/src/components/externalServices/externalServices.tsx
+++ b/client/web/src/components/externalServices/externalServices.tsx
@@ -59,7 +59,7 @@ export interface AddExternalServiceOptions {
     /**
      * Instructions that will appear on the add / edit page
      */
-    instructions?: JSX.Element | string
+    instructions?: React.ReactNode | string
 
     /**
      * The JSON schema of the external service configuration
@@ -119,15 +119,15 @@ const editorActionComments = {
     //    (https://docs.sourcegraph.com/admin/repo/permissions#sudo-access-token).`,
 }
 
-const Field = (props: { children: React.ReactChildren | string | string[] }): JSX.Element => (
+const Field: React.FunctionComponent<{ children: React.ReactNode | string | string[] }> = props => (
     <Code className="hljs-type">{props.children}</Code>
 )
 
-const Value = (props: { children: React.ReactChildren | string | string[] }): JSX.Element => (
+const Value: React.FunctionComponent<{ children: React.ReactNode | string | string[] }> = props => (
     <Code className="hljs-attr">{props.children}</Code>
 )
 
-const githubInstructions = (isEnterprise: boolean): JSX.Element => (
+const githubInstructions = (isEnterprise: boolean): React.ReactNode => (
     <div>
         <ol>
             {isEnterprise && (
diff --git a/client/web/src/enterprise/batches/BatchSpec.tsx b/client/web/src/enterprise/batches/BatchSpec.tsx
index 7551bb80589..3e28bcf15bc 100644
--- a/client/web/src/enterprise/batches/BatchSpec.tsx
+++ b/client/web/src/enterprise/batches/BatchSpec.tsx
@@ -29,7 +29,7 @@ export interface BatchSpecProps extends ThemeProps {
     className?: string
 }
 
-export const BatchSpec: React.FunctionComponent<React.PropsWithChildren<BatchSpecProps>> = ({
+export const BatchSpec: React.FunctionComponent<BatchSpecProps> = ({
     originalInput,
     isLightTheme,
     className,
@@ -90,19 +90,12 @@ export const BatchSpecDownloadLink: React.FunctionComponent<
 
 // TODO: Consider merging this component with BatchSpecDownloadLink
 export const BatchSpecDownloadButton: React.FunctionComponent<
-    React.PropsWithChildren<BatchSpecProps & Pick<BatchChangeFields, 'name'>>
+    BatchSpecProps & Pick<BatchChangeFields, 'name'>
 > = React.memo(function BatchSpecDownloadButton(props) {
     return (
-        <Button
-            className="text-right text-nowrap"
-            {...props}
-            variant="secondary"
-            outline={true}
-            as={BatchSpecDownloadLink}
-            asButton={false}
-        >
+        <BatchSpecDownloadLink className="text-right text-nowrap" {...props} asButton={false}>
             <Icon aria-hidden={true} svgPath={mdiFileDownload} /> Download YAML
-        </Button>
+        </BatchSpecDownloadLink>
     )
 })
 
diff --git a/client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/WorkspacesPreview.story.tsx b/client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/WorkspacesPreview.story.tsx
index d65eea6ab98..d27169c0baa 100644
--- a/client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/WorkspacesPreview.story.tsx
+++ b/client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/WorkspacesPreview.story.tsx
@@ -35,7 +35,7 @@ export default config
 
 export const Unstarted: Story = () => (
     <WebStory>
-        {props => (
+        {() => (
             <MockedTestProvider link={new WildcardMockLink(UNSTARTED_CONNECTION_MOCKS)}>
                 <BatchSpecContextProvider
                     batchChange={mockBatchChange()}
@@ -46,7 +46,7 @@ export const Unstarted: Story = () => (
                     }
                     refetchBatchChange={() => Promise.resolve()}
                 >
-                    <WorkspacesPreview {...props} />
+                    <WorkspacesPreview />
                 </BatchSpecContextProvider>
             </MockedTestProvider>
         )}
@@ -55,7 +55,7 @@ export const Unstarted: Story = () => (
 
 export const UnstartedWithCachedConnectionResult: Story = () => (
     <WebStory>
-        {props => (
+        {() => (
             <MockedTestProvider link={new WildcardMockLink(UNSTARTED_WITH_CACHE_CONNECTION_MOCKS)}>
                 <BatchSpecContextProvider
                     batchChange={mockBatchChange()}
@@ -66,7 +66,7 @@ export const UnstartedWithCachedConnectionResult: Story = () => (
                     }
                     refetchBatchChange={() => Promise.resolve()}
                 >
-                    <WorkspacesPreview {...props} />
+                    <WorkspacesPreview />
                 </BatchSpecContextProvider>
             </MockedTestProvider>
         )}
@@ -113,7 +113,7 @@ export const QueuedInProgress: Story = () => {
 
     return (
         <WebStory>
-            {props => (
+            {() => (
                 <MockedTestProvider link={inProgressConnectionMocks}>
                     <BatchSpecContextProvider
                         batchChange={mockBatchChange()}
@@ -124,7 +124,7 @@ export const QueuedInProgress: Story = () => {
                         }
                         refetchBatchChange={() => Promise.resolve()}
                     >
-                        <WorkspacesPreview {...props} />
+                        <WorkspacesPreview />
                     </BatchSpecContextProvider>
                 </MockedTestProvider>
             )}
@@ -172,14 +172,14 @@ export const QueuedInProgressWithCachedConnectionResult: Story = () => {
 
     return (
         <WebStory>
-            {props => (
+            {() => (
                 <MockedTestProvider link={inProgressConnectionMocks}>
                     <BatchSpecContextProvider
                         batchChange={mockBatchChange()}
                         batchSpec={mockBatchSpec()}
                         refetchBatchChange={() => Promise.resolve()}
                     >
-                        <WorkspacesPreview {...props} />
+                        <WorkspacesPreview />
                     </BatchSpecContextProvider>
                 </MockedTestProvider>
             )}
@@ -228,14 +228,14 @@ export const FailedErrored: Story = () => {
 
     return (
         <WebStory>
-            {props => (
+            {() => (
                 <MockedTestProvider link={failedConnectionMocks}>
                     <BatchSpecContextProvider
                         batchChange={mockBatchChange()}
                         batchSpec={mockBatchSpec()}
                         refetchBatchChange={() => Promise.resolve()}
                     >
-                        <WorkspacesPreview {...props} />
+                        <WorkspacesPreview />
                     </BatchSpecContextProvider>
                 </MockedTestProvider>
             )}
@@ -284,14 +284,14 @@ export const FailedErroredWithCachedConnectionResult: Story = () => {
 
     return (
         <WebStory>
-            {props => (
+            {() => (
                 <MockedTestProvider link={failedConnectionMocks}>
                     <BatchSpecContextProvider
                         batchChange={mockBatchChange()}
                         batchSpec={mockBatchSpec()}
                         refetchBatchChange={() => Promise.resolve()}
                     >
-                        <WorkspacesPreview {...props} />
+                        <WorkspacesPreview />
                     </BatchSpecContextProvider>
                 </MockedTestProvider>
             )}
@@ -303,7 +303,7 @@ FailedErroredWithCachedConnectionResult.storyName = 'failed/errored, with cached
 
 export const Succeeded: Story = () => (
     <WebStory>
-        {props => (
+        {() => (
             <MockedTestProvider link={new WildcardMockLink(UNSTARTED_WITH_CACHE_CONNECTION_MOCKS)}>
                 <BatchSpecContextProvider
                     batchChange={mockBatchChange()}
@@ -322,7 +322,7 @@ export const Succeeded: Story = () => (
                         },
                     }}
                 >
-                    <WorkspacesPreview {...props} />
+                    <WorkspacesPreview />
                 </BatchSpecContextProvider>
             </MockedTestProvider>
         )}
@@ -331,14 +331,14 @@ export const Succeeded: Story = () => (
 
 export const ReadOnly: Story = () => (
     <WebStory>
-        {props => (
+        {() => (
             <MockedTestProvider link={new WildcardMockLink(UNSTARTED_WITH_CACHE_CONNECTION_MOCKS)}>
                 <BatchSpecContextProvider
                     batchChange={mockBatchChange()}
                     batchSpec={mockBatchSpec()}
                     refetchBatchChange={() => Promise.resolve()}
                 >
-                    <WorkspacesPreview {...props} isReadOnly={true} />
+                    <WorkspacesPreview isReadOnly={true} />
                 </BatchSpecContextProvider>
             </MockedTestProvider>
         )}
diff --git a/client/web/src/enterprise/batches/batch-spec/execute/ActionsMenu.story.tsx b/client/web/src/enterprise/batches/batch-spec/execute/ActionsMenu.story.tsx
index 2dbccece2c8..d2df5786e24 100644
--- a/client/web/src/enterprise/batches/batch-spec/execute/ActionsMenu.story.tsx
+++ b/client/web/src/enterprise/batches/batch-spec/execute/ActionsMenu.story.tsx
@@ -22,9 +22,9 @@ export default config
 
 export const Executing: Story = () => (
     <WebStory>
-        {props => (
+        {() => (
             <BatchSpecContextProvider batchChange={mockBatchChange()} batchSpec={EXECUTING_BATCH_SPEC}>
-                <ActionsMenu {...props} />
+                <ActionsMenu />
             </BatchSpecContextProvider>
         )}
     </WebStory>
@@ -32,9 +32,9 @@ export const Executing: Story = () => (
 
 export const Failed: Story = () => (
     <WebStory>
-        {props => (
+        {() => (
             <BatchSpecContextProvider batchChange={mockBatchChange()} batchSpec={COMPLETED_WITH_ERRORS_BATCH_SPEC}>
-                <ActionsMenu {...props} />
+                <ActionsMenu />
             </BatchSpecContextProvider>
         )}
     </WebStory>
@@ -42,9 +42,9 @@ export const Failed: Story = () => (
 
 export const Completed: Story = () => (
     <WebStory>
-        {props => (
+        {() => (
             <BatchSpecContextProvider batchChange={mockBatchChange()} batchSpec={COMPLETED_BATCH_SPEC}>
-                <ActionsMenu {...props} />
+                <ActionsMenu />
             </BatchSpecContextProvider>
         )}
     </WebStory>
@@ -52,9 +52,9 @@ export const Completed: Story = () => (
 
 export const CompletedWithErrors: Story = () => (
     <WebStory>
-        {props => (
+        {() => (
             <BatchSpecContextProvider batchChange={mockBatchChange()} batchSpec={COMPLETED_WITH_ERRORS_BATCH_SPEC}>
-                <ActionsMenu {...props} />
+                <ActionsMenu />
             </BatchSpecContextProvider>
         )}
     </WebStory>
diff --git a/client/web/src/enterprise/batches/batch-spec/execute/ActionsMenu.tsx b/client/web/src/enterprise/batches/batch-spec/execute/ActionsMenu.tsx
index 0f36c4e0f37..8dbd720677f 100644
--- a/client/web/src/enterprise/batches/batch-spec/execute/ActionsMenu.tsx
+++ b/client/web/src/enterprise/batches/batch-spec/execute/ActionsMenu.tsx
@@ -33,7 +33,7 @@ import { CancelExecutionModal } from './CancelExecutionModal'
 
 import styles from './ActionsMenu.module.scss'
 
-export const ActionsMenu: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
+export const ActionsMenu: React.FunctionComponent = () => {
     const { batchChange, batchSpec, setActionsError } = useBatchSpecContext<BatchSpecExecutionFields>()
 
     return <MemoizedActionsMenu batchChange={batchChange} batchSpec={batchSpec} setActionsError={setActionsError} />
diff --git a/client/web/src/enterprise/batches/create/OldCreateBatchChangeContent.tsx b/client/web/src/enterprise/batches/create/OldCreateBatchChangeContent.tsx
index 49c32401f7f..49e65ec58b4 100644
--- a/client/web/src/enterprise/batches/create/OldCreateBatchChangeContent.tsx
+++ b/client/web/src/enterprise/batches/create/OldCreateBatchChangeContent.tsx
@@ -58,7 +58,7 @@ export const OldBatchChangePageContent: React.FunctionComponent<React.PropsWithC
 
     return (
         <>
-            <H2>1. Write a batch spec YAML file</H2>
+            <H2 data-testid="batch-spec-yaml-file">1. Write a batch spec YAML file</H2>
             <Container className="mb-3">
                 <Text className="mb-0">
                     The batch spec (
diff --git a/client/web/src/enterprise/batches/create/SearchTemplatesBanner.story.tsx b/client/web/src/enterprise/batches/create/SearchTemplatesBanner.story.tsx
index fedce466b53..987d7677bb8 100644
--- a/client/web/src/enterprise/batches/create/SearchTemplatesBanner.story.tsx
+++ b/client/web/src/enterprise/batches/create/SearchTemplatesBanner.story.tsx
@@ -13,8 +13,6 @@ const config: Meta = {
 
 export default config
 
-export const CreatingNewBatchChangeFromSearch: Story = () => (
-    <WebStory>{props => <SearchTemplatesBanner {...props} />}</WebStory>
-)
+export const CreatingNewBatchChangeFromSearch: Story = () => <WebStory>{() => <SearchTemplatesBanner />}</WebStory>
 
 CreatingNewBatchChangeFromSearch.storyName = 'Creating new batch change from search'
diff --git a/client/web/src/enterprise/code-monitoring/components/DeleteMonitorModal.tsx b/client/web/src/enterprise/code-monitoring/components/DeleteMonitorModal.tsx
index 67d922c056a..f061ac02a96 100644
--- a/client/web/src/enterprise/code-monitoring/components/DeleteMonitorModal.tsx
+++ b/client/web/src/enterprise/code-monitoring/components/DeleteMonitorModal.tsx
@@ -76,7 +76,11 @@ export const DeleteMonitorModal: React.FunctionComponent<React.PropsWithChildren
                     )}
                 </div>
             )}
-            {deleteCompletedOrError && <div>{deleteCompletedOrError === 'loading' && <LoadingSpinner />}</div>}
+            {/*
+             * Issue: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided
+             * It seems that v18 requires explicit boolean value
+             */}
+            {!!deleteCompletedOrError && <div>{deleteCompletedOrError === 'loading' && <LoadingSpinner />}</div>}
         </Modal>
     )
 }
diff --git a/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPage.tsx b/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPage.tsx
index 6b56ba15334..a7a38a86451 100644
--- a/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPage.tsx
+++ b/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPage.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent, useCallback, useEffect, useMemo } from 'react
 import { useApolloClient } from '@apollo/client'
 import { mdiChevronRight } from '@mdi/js'
 import classNames from 'classnames'
-import { RouteComponentProps, useHistory } from 'react-router'
+import { RouteComponentProps, useHistory, useLocation } from 'react-router'
 import { Subject } from 'rxjs'
 
 import { GitObjectType } from '@sourcegraph/shared/src/graphql-operations'
@@ -81,6 +81,7 @@ export const CodeIntelConfigurationPage: FunctionComponent<
     useEffect(() => telemetryService.logViewEvent('CodeIntelConfiguration'), [telemetryService])
 
     const history = useHistory()
+    const location = useLocation<{ message: string; modal: string }>()
 
     const apolloClient = useApolloClient()
     const queryPoliciesCallback = useCallback(
@@ -109,9 +110,7 @@ export const CodeIntelConfigurationPage: FunctionComponent<
                 {authenticatedUser?.siteAdmin && <PolicyListActions history={history} />}
             </CodeIntelConfigurationPageHeader>
 
-            {history.location.state && (
-                <FlashMessage state={history.location.state.modal} message={history.location.state.message} />
-            )}
+            {location.state && <FlashMessage state={location.state.modal} message={location.state.message} />}
             <Container>
                 <FilteredConnection<CodeIntelligenceConfigurationPolicyFields, {}>
                     listComponent="div"
diff --git a/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPolicyPage.tsx b/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPolicyPage.tsx
index 7d582274836..edb0e527bb1 100644
--- a/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPolicyPage.tsx
+++ b/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPolicyPage.tsx
@@ -3,7 +3,7 @@ import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 import { ApolloError } from '@apollo/client'
 import { mdiDelete } from '@mdi/js'
 import * as H from 'history'
-import { RouteComponentProps } from 'react-router'
+import { RouteComponentProps, useLocation } from 'react-router'
 
 import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
 import { GitObjectType } from '@sourcegraph/shared/src/graphql-operations'
@@ -45,6 +45,7 @@ export const CodeIntelConfigurationPolicyPage: FunctionComponent<
     lockfileIndexingEnabled = window.context?.codeIntelLockfileIndexingEnabled,
 }) => {
     useEffect(() => telemetryService.logViewEvent('CodeIntelConfigurationPolicy'), [telemetryService])
+    const location = useLocation<{ message: string; modal: string }>()
 
     const { policyConfig, loadingPolicyConfig, policyConfigError } = usePolicyConfigurationByID(id)
     const [saved, setSaved] = useState<CodeIntelligenceConfigurationPolicyFields>()
@@ -129,9 +130,7 @@ export const CodeIntelConfigurationPolicyPage: FunctionComponent<
             {savingError && <ErrorAlert prefix="Error saving configuration policy" error={savingError} />}
             {deleteError && <ErrorAlert prefix="Error deleting configuration policy" error={deleteError} />}
 
-            {history.location.state && (
-                <FlashMessage state={history.location.state.modal} message={history.location.state.message} />
-            )}
+            {location.state && <FlashMessage state={location.state.modal} message={location.state.message} />}
 
             {policy.protected ? (
                 <Alert variant="info">
diff --git a/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelIndexesPage.tsx b/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelIndexesPage.tsx
index 2a409d87074..7b356116b03 100644
--- a/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelIndexesPage.tsx
+++ b/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelIndexesPage.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent, useCallback, useEffect, useMemo } from 'react'
 
 import { useApolloClient } from '@apollo/client'
 import classNames from 'classnames'
-import { RouteComponentProps } from 'react-router'
+import { RouteComponentProps, useLocation } from 'react-router'
 import { Subject } from 'rxjs'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
@@ -73,7 +73,7 @@ const filters: FilteredConnectionFilter[] = [
     },
 ]
 
-export const CodeIntelIndexesPage: FunctionComponent<React.PropsWithChildren<CodeIntelIndexesPageProps>> = ({
+export const CodeIntelIndexesPage: FunctionComponent<CodeIntelIndexesPageProps> = ({
     authenticatedUser,
     repo,
     queryLsifIndexListByRepository = defaultQueryLsifIndexListByRepository,
@@ -81,9 +81,9 @@ export const CodeIntelIndexesPage: FunctionComponent<React.PropsWithChildren<Cod
     now,
     telemetryService,
     history,
-    ...props
 }) => {
     useEffect(() => telemetryService.logViewEvent('CodeIntelIndexes'), [telemetryService])
+    const location = useLocation<{ message: string; modal: string }>()
 
     const apolloClient = useApolloClient()
     const queryIndexes = useCallback(
@@ -109,15 +109,13 @@ export const CodeIntelIndexesPage: FunctionComponent<React.PropsWithChildren<Cod
                 className="mb-3"
             />
 
-            {repo && authenticatedUser?.siteAdmin && (
+            {!!repo && !!authenticatedUser?.siteAdmin && (
                 <Container className="mb-2">
                     <EnqueueForm repoId={repo.id} querySubject={querySubject} />
                 </Container>
             )}
 
-            {history.location.state && (
-                <FlashMessage state={history.location.state.modal} message={history.location.state.message} />
-            )}
+            {!!location.state && <FlashMessage state={location.state.modal} message={location.state.message} />}
 
             <Container>
                 <div className="list-group position-relative">
@@ -132,7 +130,7 @@ export const CodeIntelIndexesPage: FunctionComponent<React.PropsWithChildren<Cod
                         nodeComponentProps={{ now }}
                         queryConnection={queryIndexes}
                         history={history}
-                        location={props.location}
+                        location={location}
                         cursorPaging={true}
                         filters={filters}
                         emptyElement={<EmptyAutoIndex />}
diff --git a/client/web/src/enterprise/codeintel/uploads/pages/CodeIntelUploadsPage.tsx b/client/web/src/enterprise/codeintel/uploads/pages/CodeIntelUploadsPage.tsx
index ab679493584..0711fd46dec 100644
--- a/client/web/src/enterprise/codeintel/uploads/pages/CodeIntelUploadsPage.tsx
+++ b/client/web/src/enterprise/codeintel/uploads/pages/CodeIntelUploadsPage.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 're
 
 import { useApolloClient } from '@apollo/client'
 import classNames from 'classnames'
-import { RouteComponentProps } from 'react-router'
+import { RouteComponentProps, useLocation } from 'react-router'
 import { of } from 'rxjs'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
@@ -102,6 +102,7 @@ export const CodeIntelUploadsPage: FunctionComponent<React.PropsWithChildren<Cod
     ...props
 }) => {
     useEffect(() => telemetryService.logViewEvent('CodeIntelUploads'), [telemetryService])
+    const location = useLocation<{ message: string; modal: string }>()
 
     const apolloClient = useApolloClient()
     const queryLsifUploads = useCallback(
@@ -124,14 +125,14 @@ export const CodeIntelUploadsPage: FunctionComponent<React.PropsWithChildren<Cod
 
     const [deleteStatus, setDeleteStatus] = useState({ isDeleting: false, message: '', state: '' })
     useEffect(() => {
-        if (history.location.state) {
+        if (location.state) {
             setDeleteStatus({
                 isDeleting: true,
-                message: history.location.state.message,
-                state: history.location.state.modal,
+                message: location.state.message,
+                state: location.state.modal,
             })
         }
-    }, [history.location.state])
+    }, [location.state])
 
     return (
         <div className="code-intel-uploads">
diff --git a/client/web/src/enterprise/embed/main.tsx b/client/web/src/enterprise/embed/main.tsx
index e497eb89f8b..e4818b9433a 100644
--- a/client/web/src/enterprise/embed/main.tsx
+++ b/client/web/src/enterprise/embed/main.tsx
@@ -1,11 +1,13 @@
 import '@sourcegraph/shared/src/polyfills'
 
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { EmbeddedWebApp } from './EmbeddedWebApp'
 
 // It's important to have a root component in a separate file to create a react-refresh boundary and avoid page reload.
 // https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#edits-always-lead-to-full-reload
 window.addEventListener('DOMContentLoaded', () => {
-    render(<EmbeddedWebApp />, document.querySelector('#root'))
+    const root = createRoot(document.querySelector('#root')!)
+
+    root.render(<EmbeddedWebApp />)
 })
diff --git a/client/web/src/enterprise/insights/components/creation-ui/creation-actions/CodeInsightsCreationActions.tsx b/client/web/src/enterprise/insights/components/creation-ui/creation-actions/CodeInsightsCreationActions.tsx
index b8501924ebc..acd4f08da5c 100644
--- a/client/web/src/enterprise/insights/components/creation-ui/creation-actions/CodeInsightsCreationActions.tsx
+++ b/client/web/src/enterprise/insights/components/creation-ui/creation-actions/CodeInsightsCreationActions.tsx
@@ -38,7 +38,7 @@ export const CodeInsightsCreationActions: FC<CodeInsightsCreationActionsProps> =
             )}
 
             <div className="d-flex flex-wrap align-items-center">
-                {errors && <ErrorAlert className="w-100" error={errors} />}
+                {!!errors && <ErrorAlert className="w-100" error={errors} />}
 
                 <LoaderButton
                     type="submit"
diff --git a/client/web/src/enterprise/insights/components/creation-ui/live-preview/LivePreviewCard.tsx b/client/web/src/enterprise/insights/components/creation-ui/live-preview/LivePreviewCard.tsx
index 3fafbc632cc..819f94cf936 100644
--- a/client/web/src/enterprise/insights/components/creation-ui/live-preview/LivePreviewCard.tsx
+++ b/client/web/src/enterprise/insights/components/creation-ui/live-preview/LivePreviewCard.tsx
@@ -49,7 +49,7 @@ const LivePreviewBanner: React.FunctionComponent<React.PropsWithChildren<unknown
 
 interface LivePreviewChartProps extends React.ComponentProps<typeof ParentSize> {}
 
-const LivePreviewChart: React.FunctionComponent<React.PropsWithChildren<LivePreviewChartProps>> = props => (
+const LivePreviewChart: React.FunctionComponent<LivePreviewChartProps> = props => (
     <ParentSize {...props} className={classNames(styles.chartBlock, props.className)} />
 )
 
diff --git a/client/web/src/enterprise/insights/components/form/getDefaultInputProps.ts b/client/web/src/enterprise/insights/components/form/getDefaultInputProps.ts
index be786e7e958..bc386013e09 100644
--- a/client/web/src/enterprise/insights/components/form/getDefaultInputProps.ts
+++ b/client/web/src/enterprise/insights/components/form/getDefaultInputProps.ts
@@ -20,7 +20,7 @@ function getDefaultInputStatus<T>({ meta }: useFieldAPI<T>): InputStatus {
     return InputStatus.initial
 }
 
-function getDefaultInputError<T>({ meta }: useFieldAPI<T>): Pick<InputProps, 'error'> {
+function getDefaultInputError<T>({ meta }: useFieldAPI<T>): InputProps['error'] {
     return meta.touched && meta.error
 }
 
diff --git a/client/web/src/enterprise/insights/components/insights-view-grid/SmartInsightsViewGrid.tsx b/client/web/src/enterprise/insights/components/insights-view-grid/SmartInsightsViewGrid.tsx
index 6efc884a69e..3c6a1781f48 100644
--- a/client/web/src/enterprise/insights/components/insights-view-grid/SmartInsightsViewGrid.tsx
+++ b/client/web/src/enterprise/insights/components/insights-view-grid/SmartInsightsViewGrid.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from 'react'
+import React, { memo, useCallback, useLayoutEffect, useState } from 'react'
 
 import { isEqual } from 'lodash'
 import { Layout, Layouts } from 'react-grid-layout'
@@ -32,7 +32,7 @@ export const SmartInsightsViewGrid: React.FunctionComponent<React.PropsWithChild
         const [layouts, setLayouts] = useState<Layouts>({})
         const [resizingView, setResizeView] = useState<Layout | null>(null)
 
-        useEffect(() => {
+        useLayoutEffect(() => {
             setLayouts(insightLayoutGenerator(insights))
         }, [insights])
 
diff --git a/client/web/src/enterprise/insights/components/insights-view-grid/components/backend-insight/components/sort-filter-series-panel/SortFilterSeriesPanel.tsx b/client/web/src/enterprise/insights/components/insights-view-grid/components/backend-insight/components/sort-filter-series-panel/SortFilterSeriesPanel.tsx
index 3e8a0b65f09..29c776fd608 100644
--- a/client/web/src/enterprise/insights/components/insights-view-grid/components/backend-insight/components/sort-filter-series-panel/SortFilterSeriesPanel.tsx
+++ b/client/web/src/enterprise/insights/components/insights-view-grid/components/backend-insight/components/sort-filter-series-panel/SortFilterSeriesPanel.tsx
@@ -114,7 +114,12 @@ interface ToggleButtonProps {
     onClick: (value: SeriesSortOptionsInput) => void
 }
 
-const ToggleButton: React.FunctionComponent<ToggleButtonProps> = ({ selected, value, children, onClick }) => (
+const ToggleButton: React.FunctionComponent<React.PropsWithChildren<ToggleButtonProps>> = ({
+    selected,
+    value,
+    children,
+    onClick,
+}) => (
     <Button variant="secondary" size="sm" className={getClasses(selected, value)} onClick={() => onClick(value)}>
         {children}
     </Button>
diff --git a/client/web/src/enterprise/insights/hooks/use-parallel-requests/use-prallel-requests.test.ts b/client/web/src/enterprise/insights/hooks/use-parallel-requests/use-prallel-requests.test.ts
index 8063a934c56..063a21d3b2b 100644
--- a/client/web/src/enterprise/insights/hooks/use-parallel-requests/use-prallel-requests.test.ts
+++ b/client/web/src/enterprise/insights/hooks/use-parallel-requests/use-prallel-requests.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import { Observable, ObservableInput, of } from 'rxjs'
 import { delay, map, switchMap, tap } from 'rxjs/operators'
 import sinon from 'sinon'
diff --git a/client/web/src/enterprise/insights/hooks/use-ui-features.test.tsx b/client/web/src/enterprise/insights/hooks/use-ui-features.test.tsx
index 109e8c1541a..0dd2138b421 100644
--- a/client/web/src/enterprise/insights/hooks/use-ui-features.test.tsx
+++ b/client/web/src/enterprise/insights/hooks/use-ui-features.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { CodeInsightsBackend, CodeInsightsBackendContext, CodeInsightsGqlBackend } from '../core'
 
diff --git a/client/web/src/enterprise/insights/pages/dashboards/creation/components/InsightsDashboardCreationContent.tsx b/client/web/src/enterprise/insights/pages/dashboards/creation/components/InsightsDashboardCreationContent.tsx
index f668827b8d0..b955441a018 100644
--- a/client/web/src/enterprise/insights/pages/dashboards/creation/components/InsightsDashboardCreationContent.tsx
+++ b/client/web/src/enterprise/insights/pages/dashboards/creation/components/InsightsDashboardCreationContent.tsx
@@ -44,9 +44,7 @@ export interface InsightsDashboardCreationContentProps {
 /**
  * Renders creation UI form content (fields, submit and cancel buttons).
  */
-export const InsightsDashboardCreationContent: React.FunctionComponent<
-    React.PropsWithChildren<InsightsDashboardCreationContentProps>
-> = props => {
+export const InsightsDashboardCreationContent: React.FunctionComponent<InsightsDashboardCreationContentProps> = props => {
     const { initialValues, owners, onSubmit, children } = props
 
     const { UIFeatures } = useContext(CodeInsightsBackendContext)
diff --git a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/DashboardsContentPage.test.tsx b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/DashboardsContentPage.test.tsx
index 314122a3558..e642ff183cd 100644
--- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/DashboardsContentPage.test.tsx
+++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/DashboardsContentPage.test.tsx
@@ -173,10 +173,8 @@ const triggerDashboardMenuItem = async (
 
     const dashboardMenuItem = screen.getByTestId(testId)
 
-    // We're simulating keyboard navigation here to circumvent a bug in ReachUI
-    // does not respond to programmatic click events on menu items
     dashboardMenuItem.focus()
-    user.keyboard(' ')
+    user.click(dashboardMenuItem)
 }
 
 beforeEach(() => {
diff --git a/client/web/src/enterprise/insights/pages/insights/creation/ComputeLivePreview.tsx b/client/web/src/enterprise/insights/pages/insights/creation/ComputeLivePreview.tsx
index 032af900a1e..270c0d7aefb 100644
--- a/client/web/src/enterprise/insights/pages/insights/creation/ComputeLivePreview.tsx
+++ b/client/web/src/enterprise/insights/pages/insights/creation/ComputeLivePreview.tsx
@@ -41,7 +41,7 @@ interface ComputeLivePreviewProps {
     }[]
 }
 
-export const ComputeLivePreview: React.FunctionComponent<React.PropsWithChildren<ComputeLivePreviewProps>> = props => {
+export const ComputeLivePreview: React.FunctionComponent<ComputeLivePreviewProps> = props => {
     // For the purposes of building out this component before the backend is ready
     // we are using the standard "line series" type data.
     // TODO after backend is merged, remove update the series value to use that structure
diff --git a/client/web/src/enterprise/insights/pages/insights/creation/LineChartLivePreview.tsx b/client/web/src/enterprise/insights/pages/insights/creation/LineChartLivePreview.tsx
index 9183e5cdb2e..d476f21a4ee 100644
--- a/client/web/src/enterprise/insights/pages/insights/creation/LineChartLivePreview.tsx
+++ b/client/web/src/enterprise/insights/pages/insights/creation/LineChartLivePreview.tsx
@@ -42,9 +42,7 @@ interface LineChartLivePreviewProps {
     series: LivePreviewSeries[]
 }
 
-export const LineChartLivePreview: React.FunctionComponent<
-    React.PropsWithChildren<LineChartLivePreviewProps>
-> = props => {
+export const LineChartLivePreview: React.FunctionComponent<LineChartLivePreviewProps> = props => {
     const { disabled, repositories, stepValue, step, series, isAllReposMode, className } = props
     const { getInsightPreviewContent: getLivePreviewContent } = useContext(CodeInsightsBackendContext)
     const seriesToggleState = useSeriesToggle()
diff --git a/client/web/src/enterprise/insights/pages/insights/creation/lang-stats/components/live-preview-chart/LangStatsInsightLivePreview.tsx b/client/web/src/enterprise/insights/pages/insights/creation/lang-stats/components/live-preview-chart/LangStatsInsightLivePreview.tsx
index bd62c4c0791..e2348bf22d5 100644
--- a/client/web/src/enterprise/insights/pages/insights/creation/lang-stats/components/live-preview-chart/LangStatsInsightLivePreview.tsx
+++ b/client/web/src/enterprise/insights/pages/insights/creation/lang-stats/components/live-preview-chart/LangStatsInsightLivePreview.tsx
@@ -35,9 +35,7 @@ export interface LangStatsInsightLivePreviewProps {
  * Displays live preview chart for creation UI with the latest insights settings
  * from creation UI form.
  */
-export const LangStatsInsightLivePreview: React.FunctionComponent<
-    React.PropsWithChildren<LangStatsInsightLivePreviewProps>
-> = props => {
+export const LangStatsInsightLivePreview: React.FunctionComponent<LangStatsInsightLivePreviewProps> = props => {
     const { repository = '', threshold, disabled = false, className } = props
     const { getLangStatsInsightContent } = useContext(CodeInsightsBackendContext)
 
diff --git a/client/web/src/enterprise/main.tsx b/client/web/src/enterprise/main.tsx
index ea6da0f098b..0fc0056920b 100644
--- a/client/web/src/enterprise/main.tsx
+++ b/client/web/src/enterprise/main.tsx
@@ -7,12 +7,14 @@ import '@sourcegraph/shared/src/polyfills'
 
 import '../monitoring/initMonitoring'
 
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { EnterpriseWebApp } from './EnterpriseWebApp'
 
 // It's important to have a root component in a separate file to create a react-refresh boundary and avoid page reload.
 // https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#edits-always-lead-to-full-reload
 window.addEventListener('DOMContentLoaded', () => {
-    render(<EnterpriseWebApp />, document.querySelector('#root'))
+    const root = createRoot(document.querySelector('#root')!)
+
+    root.render(<EnterpriseWebApp />)
 })
diff --git a/client/web/src/enterprise/organizations/EarlyAccessOrgsCodeForm.tsx b/client/web/src/enterprise/organizations/EarlyAccessOrgsCodeForm.tsx
index 155e0b6754c..457f0bb3efc 100644
--- a/client/web/src/enterprise/organizations/EarlyAccessOrgsCodeForm.tsx
+++ b/client/web/src/enterprise/organizations/EarlyAccessOrgsCodeForm.tsx
@@ -1,5 +1,7 @@
 import { FunctionComponent, useCallback, useState } from 'react'
 
+import { RouteComponentProps } from 'react-router'
+
 import { Form } from '@sourcegraph/branded/src/components/Form'
 import { gql, useLazyQuery, useMutation } from '@sourcegraph/http-client'
 import { IFeatureFlagOverride } from '@sourcegraph/shared/src/schema'
@@ -41,6 +43,9 @@ export const CREATE_FEATURE_FLAG_OVERRIDE = gql`
         }
     }
 `
+
+export interface EarlyAccessOrgsCodeFormProps extends RouteComponentProps<{}> {}
+
 /**
  * Form that sets a feature flag override for org-code flag, based on organization name.
  * This enables 2 screens - organization code host connections and organization repositories.
@@ -51,7 +56,7 @@ export const CREATE_FEATURE_FLAG_OVERRIDE = gql`
  * This implementation is a quick hack for making our lives easier while in early access
  * stage. IMO it's not worth a lot of effort as it is throwaway work once we are in GA.
  */
-export const EarlyAccessOrgsCodeForm: FunctionComponent<any> = () => {
+export const EarlyAccessOrgsCodeForm: FunctionComponent<EarlyAccessOrgsCodeFormProps> = () => {
     const [name, setName] = useState<string>('')
 
     const [updateFeatureFlag, { data, loading: flagLoading, error: flagError }] = useMutation<
diff --git a/client/web/src/enterprise/productSubscription/ProductCertificate.tsx b/client/web/src/enterprise/productSubscription/ProductCertificate.tsx
index 50b73d6efad..f25da3c06e7 100644
--- a/client/web/src/enterprise/productSubscription/ProductCertificate.tsx
+++ b/client/web/src/enterprise/productSubscription/ProductCertificate.tsx
@@ -8,16 +8,16 @@ import styles from './ProductCertificate.module.scss'
 
 interface Props {
     /** The title of the certificate. */
-    title: React.ReactFragment
+    title: React.ReactNode
 
     /** The subtitle of the certificate. */
-    subtitle?: React.ReactFragment | null
+    subtitle?: React.ReactNode
 
     /** The detail text of the certificate. */
-    detail?: React.ReactFragment | null
+    detail?: React.ReactNode
 
     /** Rendered after the certificate body (usually consists of a Wildcard <CardFooter />). */
-    footer?: React.ReactFragment | null
+    footer?: React.ReactNode
 
     className?: string
 }
diff --git a/client/web/src/enterprise/searchContexts/SearchContextForm.tsx b/client/web/src/enterprise/searchContexts/SearchContextForm.tsx
index 58c786cadb8..5dbc3e8a509 100644
--- a/client/web/src/enterprise/searchContexts/SearchContextForm.tsx
+++ b/client/web/src/enterprise/searchContexts/SearchContextForm.tsx
@@ -180,7 +180,7 @@ export const SearchContextForm: React.FunctionComponent<React.PropsWithChildren<
     const [hasRepositoriesConfigChanged, setHasRepositoriesConfigChanged] = useState(false)
     const [repositoriesConfig, setRepositoriesConfig] = useState('')
     const onRepositoriesConfigChange = useCallback(
-        (config, isInitialValue) => {
+        (config: string, isInitialValue?: boolean) => {
             setRepositoriesConfig(config)
             if (!isInitialValue && config !== repositoriesConfig) {
                 setHasRepositoriesConfigChanged(true)
diff --git a/client/web/src/enterprise/user/productSubscriptions/ProductSubscriptionForm.tsx b/client/web/src/enterprise/user/productSubscriptions/ProductSubscriptionForm.tsx
index cc0377eeb75..7ff183d7bf7 100644
--- a/client/web/src/enterprise/user/productSubscriptions/ProductSubscriptionForm.tsx
+++ b/client/web/src/enterprise/user/productSubscriptions/ProductSubscriptionForm.tsx
@@ -80,7 +80,7 @@ interface Props extends ThemeProps {
     primaryButtonTextNoPaymentRequired?: string
 
     /** A fragment to render below the form's primary button. */
-    afterPrimaryButton?: React.ReactFragment
+    afterPrimaryButton?: React.ReactNode
 
     history: H.History
 }
diff --git a/client/web/src/enterprise/user/settings/ExternalAccountNode.tsx b/client/web/src/enterprise/user/settings/ExternalAccountNode.tsx
index 437a7019c7b..925a450ae69 100644
--- a/client/web/src/enterprise/user/settings/ExternalAccountNode.tsx
+++ b/client/web/src/enterprise/user/settings/ExternalAccountNode.tsx
@@ -149,12 +149,16 @@ export class ExternalAccountNode extends React.PureComponent<ExternalAccountNode
                         </small>
                     </div>
                     <div className="text-nowrap">
-                        {this.props.node.accountData && (
+                        {/*
+                         * Issue: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided
+                         * It seems that v18 requires explicit boolean value
+                         */}
+                        {!!this.props.node.accountData && (
                             <Button onClick={this.toggleShowData} variant="secondary">
                                 {this.state.showData ? 'Hide' : 'Show'} data
                             </Button>
                         )}{' '}
-                        {this.props.node.refreshURL && (
+                        {!!this.props.node.refreshURL && (
                             <Button href={this.props.node.refreshURL} variant="secondary" as="a">
                                 Refresh
                             </Button>
diff --git a/client/web/src/extensions/extension/RegistryExtensionContributionsPage.tsx b/client/web/src/extensions/extension/RegistryExtensionContributionsPage.tsx
index c1973a369e6..7f9404a9c53 100644
--- a/client/web/src/extensions/extension/RegistryExtensionContributionsPage.tsx
+++ b/client/web/src/extensions/extension/RegistryExtensionContributionsPage.tsx
@@ -24,7 +24,7 @@ interface ContributionGroup {
     title: string
     error?: ErrorLike
     columnHeaders: string[]
-    rows: (React.ReactFragment | null)[][]
+    rows: React.ReactNode[][]
 }
 
 const ContributionsTable: React.FunctionComponent<
diff --git a/client/web/src/featureFlags/FeatureFlagsProvider.tsx b/client/web/src/featureFlags/FeatureFlagsProvider.tsx
index ee7878a1bb8..d1362a9682d 100644
--- a/client/web/src/featureFlags/FeatureFlagsProvider.tsx
+++ b/client/web/src/featureFlags/FeatureFlagsProvider.tsx
@@ -49,7 +49,7 @@ const FeatureFlagsLocalOverrideAgent = React.memo(() => {
 })
 
 const MINUTE = 60000
-export const FeatureFlagsProvider: React.FunctionComponent<FeatureFlagsProviderProps> = ({
+export const FeatureFlagsProvider: React.FunctionComponent<React.PropsWithChildren<FeatureFlagsProviderProps>> = ({
     isLocalOverrideEnabled = true,
     children,
 }) => {
@@ -77,11 +77,9 @@ interface MockedFeatureFlagsProviderProps {
  *              <ComponentUsingFeatureFlag />
  *         </MockedFeatureFlagsProvider>)
  */
-export const MockedFeatureFlagsProvider: React.FunctionComponent<MockedFeatureFlagsProviderProps> = ({
-    overrides,
-    refetchInterval,
-    children,
-}) => {
+export const MockedFeatureFlagsProvider: React.FunctionComponent<
+    React.PropsWithChildren<MockedFeatureFlagsProviderProps>
+> = ({ overrides, refetchInterval, children }) => {
     const mockRequestGraphQL = useMemo(
         () => (
             query: string,
diff --git a/client/web/src/featureFlags/useFeatureFlag.test.tsx b/client/web/src/featureFlags/useFeatureFlag.test.tsx
index b8462d6187f..69c5e88a49d 100644
--- a/client/web/src/featureFlags/useFeatureFlag.test.tsx
+++ b/client/web/src/featureFlags/useFeatureFlag.test.tsx
@@ -1,4 +1,6 @@
-import { renderHook } from '@testing-library/react-hooks'
+import React from 'react'
+
+import { renderHook, waitFor } from '@testing-library/react'
 
 import { FeatureFlagName } from './featureFlags'
 import { MockedFeatureFlagsProvider } from './FeatureFlagsProvider'
@@ -9,25 +11,49 @@ describe('useFeatureFlag', () => {
     const DISABLED_FLAG = 'disabled-flag' as FeatureFlagName
     const ERROR_FLAG = 'error-flag' as FeatureFlagName
     const NON_EXISTING_FLAG = 'non-existing-flag' as FeatureFlagName
-    const setup = (initialFlagName: FeatureFlagName, defaultValue = false, refetchInterval?: number) =>
-        renderHook(({ flagName }) => useFeatureFlag(flagName, defaultValue), {
-            wrapper: function Wrapper({ children, overrides }) {
-                return (
-                    <MockedFeatureFlagsProvider
-                        overrides={overrides as Partial<Record<FeatureFlagName, boolean>>}
-                        refetchInterval={refetchInterval}
-                    >
-                        {children}
-                    </MockedFeatureFlagsProvider>
-                )
-            },
+
+    const Wrapper: React.JSXElementConstructor<{
+        children: React.ReactElement
+        nextOverrides?: Partial<Record<FeatureFlagName, boolean | Error>>
+        refetchInterval?: number
+    }> = ({ nextOverrides, children, refetchInterval }) => {
+        // New `renderHook` doesn't pass any props into Wrapper component like the old one
+        // so couldn't find a way to reproduce `state.setRender(...)` with custom `overrides`
+        // we have to use this state together with `nextOverrides` as an alternative.
+        const [overrides, setOverrides] = React.useState({
+            [ENABLED_FLAG]: true,
+            [DISABLED_FLAG]: false,
+            [ERROR_FLAG]: new Error('Some error'),
+        })
+
+        React.useEffect(() => {
+            setTimeout(() => {
+                setOverrides(current => nextOverrides ?? current)
+            }, refetchInterval)
+        }, [nextOverrides, refetchInterval])
+
+        return (
+            <MockedFeatureFlagsProvider overrides={overrides} refetchInterval={refetchInterval}>
+                {children}
+            </MockedFeatureFlagsProvider>
+        )
+    }
+
+    const setup = (
+        initialFlagName: FeatureFlagName,
+        defaultValue = false,
+        refetchInterval?: number,
+        nextOverrides?: Partial<Record<FeatureFlagName, boolean | Error>>
+    ) =>
+        renderHook<
+            ReturnType<typeof useFeatureFlag>,
+            {
+                flagName: FeatureFlagName
+            }
+        >(({ flagName }) => useFeatureFlag(flagName, defaultValue), {
+            wrapper: props => <Wrapper refetchInterval={refetchInterval} nextOverrides={nextOverrides} {...props} />,
             initialProps: {
                 flagName: initialFlagName,
-                overrides: {
-                    [ENABLED_FLAG]: true,
-                    [DISABLED_FLAG]: false,
-                    [ERROR_FLAG]: new Error('Some error'),
-                },
             },
         })
 
@@ -37,20 +63,19 @@ describe('useFeatureFlag', () => {
         expect(state.result.current).toStrictEqual([false, 'initial', undefined])
 
         // Loaded state
-        await state.waitForNextUpdate()
-        expect(state.result.current).toStrictEqual([false, 'loaded', undefined])
+        await waitFor(() => expect(state.result.current).toStrictEqual([false, 'loaded', undefined]))
     })
 
     it('returns [defaultValue=true] correctly', async () => {
         const state = setup(NON_EXISTING_FLAG, true)
-        await state.waitForNextUpdate()
-        expect(state.result.current).toEqual(expect.arrayContaining([true, 'loaded']))
+
+        await waitFor(() => expect(state.result.current).toEqual(expect.arrayContaining([true, 'loaded'])))
     })
 
     it('returns [defaultValue=false] correctly', async () => {
         const state = setup(NON_EXISTING_FLAG, false)
-        await state.waitForNextUpdate()
-        expect(state.result.current).toEqual(expect.arrayContaining([false, 'loaded']))
+
+        await waitFor(() => expect(state.result.current).toEqual(expect.arrayContaining([false, 'loaded'])))
     })
 
     it('returns [true] value correctly', async () => {
@@ -59,51 +84,44 @@ describe('useFeatureFlag', () => {
         expect(state.result.current).toStrictEqual([false, 'initial', undefined])
 
         // Loaded state
-        await state.waitForNextUpdate()
-        expect(state.result.current).toStrictEqual([true, 'loaded', undefined])
-        expect(state.result.all.length).toBe(2)
+        await waitFor(() => expect(state.result.current).toStrictEqual([true, 'loaded', undefined]))
     })
 
     it('updates on value change', async () => {
-        const state = setup(ENABLED_FLAG, false, 100)
+        const state = setup(ENABLED_FLAG, false, 100, { [ENABLED_FLAG]: false })
         // Initial state
         expect(state.result.current).toStrictEqual([false, 'initial', undefined])
 
         // Loaded state
-        await state.waitForNextUpdate()
-        expect(state.result.current).toStrictEqual([true, 'loaded', undefined])
+        await waitFor(() => expect(state.result.current).toStrictEqual([true, 'loaded', undefined]))
 
         // Rerender and wait for new state
-        state.rerender({ overrides: { [ENABLED_FLAG]: false }, flagName: ENABLED_FLAG })
-        await state.waitForNextUpdate()
-        expect(state.result.current).toStrictEqual([false, 'loaded', undefined])
+        state.rerender({ flagName: ENABLED_FLAG })
+
+        await waitFor(() => expect(state.result.current).toStrictEqual([false, 'loaded', undefined]))
     })
 
     it('updates when feature flag prop changes', async () => {
-        const state = setup(ENABLED_FLAG)
+        const state = setup(ENABLED_FLAG, false, undefined, {})
         // Initial state
-        expect(state.result.all[0]).toStrictEqual([false, 'initial', undefined])
+        expect(state.result.current).toStrictEqual([false, 'initial', undefined])
         // Loaded state
-        await state.waitForNextUpdate()
-        expect(state.result.current).toStrictEqual([true, 'loaded', undefined])
+        await waitFor(() => expect(state.result.current).toStrictEqual([true, 'loaded', undefined]))
 
         // Rerender and wait for new state
-        state.rerender({ overrides: {}, flagName: DISABLED_FLAG })
-        await state.waitForNextUpdate()
-        expect(state.result.current).toStrictEqual([false, 'loaded', undefined])
+        state.rerender({ flagName: DISABLED_FLAG })
+        await waitFor(() => expect(state.result.current).toStrictEqual([false, 'loaded', undefined]))
     })
 
     it('returns "error" when no context parent', () => {
         const state = renderHook(() => useFeatureFlag(ENABLED_FLAG))
-        // Initial state
-        expect(state.result.all[0]).toStrictEqual([false, 'initial', undefined])
-        // Loaded state
+
         expect(state.result.current).toEqual(expect.arrayContaining([false, 'error']))
     })
 
     it('returns "error" when unhandled error', async () => {
         const state = setup(ERROR_FLAG)
-        await state.waitForNextUpdate()
-        expect(state.result.current).toEqual(expect.arrayContaining([false, 'error']))
+
+        await waitFor(() => expect(state.result.current).toEqual(expect.arrayContaining([false, 'error'])))
     })
 })
diff --git a/client/web/src/integration/batches.test.ts b/client/web/src/integration/batches.test.ts
index 6c3d211e9fe..d08310277a0 100644
--- a/client/web/src/integration/batches.test.ts
+++ b/client/web/src/integration/batches.test.ts
@@ -583,6 +583,7 @@ describe('Batches', () => {
         // TODO: SSBC has to go through accessibility audits before this can pass.
         it.skip('is styled correctly', async () => {
             await driver.page.goto(driver.sourcegraphBaseUrl + '/batch-changes/create')
+            await driver.page.waitForSelector('[data-testid="batch-spec-yaml-file"]')
             await percySnapshotWithVariants(driver.page, 'Create batch change')
             await accessibilityAudit(driver.page)
         })
diff --git a/client/web/src/integration/blob-viewer.test.ts b/client/web/src/integration/blob-viewer.test.ts
index 8a2df2eb1b4..8d98c8a6043 100644
--- a/client/web/src/integration/blob-viewer.test.ts
+++ b/client/web/src/integration/blob-viewer.test.ts
@@ -72,9 +72,9 @@ describe('Blob viewer', () => {
     describe('general layout for viewing a file', () => {
         it('populates editor content and FILES tab', async () => {
             await driver.page.goto(`${driver.sourcegraphBaseUrl}/${repositoryName}/-/blob/${fileName}`)
-            await driver.page.waitForSelector('.test-repo-blob')
+            await driver.page.waitForSelector('[data-testid="repo-blob"]')
             const blobContent = await driver.page.evaluate(
-                () => document.querySelector<HTMLElement>('.test-repo-blob')?.textContent
+                () => document.querySelector<HTMLElement>('[data-testid="repo-blob"]')?.textContent
             )
 
             // editor shows the return string content from Blob request
@@ -144,13 +144,13 @@ describe('Blob viewer', () => {
 
         it('should redirect from line number hash to query parameter', async () => {
             await driver.page.goto(`${driver.sourcegraphBaseUrl}/${repositoryName}/-/blob/${fileName}#2`)
-            await driver.page.waitForSelector('.test-repo-blob')
+            await driver.page.waitForSelector('[data-testid="repo-blob"]')
             await driver.assertWindowLocation(`/${repositoryName}/-/blob/${fileName}?L2`)
         })
 
         it('should redirect from line range hash to query parameter', async () => {
             await driver.page.goto(`${driver.sourcegraphBaseUrl}/${repositoryName}/-/blob/${fileName}#1-3`)
-            await driver.page.waitForSelector('.test-repo-blob')
+            await driver.page.waitForSelector('[data-testid="repo-blob"]')
             await driver.assertWindowLocation(`/${repositoryName}/-/blob/${fileName}?L1-3`)
         })
     })
@@ -271,7 +271,7 @@ describe('Blob viewer', () => {
             await driver.page.goto(
                 `${driver.sourcegraphBaseUrl}/${repositoryName}/-/blob/this_is_a_long_file_path/apps/rest-showcase/src/main/java/org/demo/rest/example/OrdersController.java`
             )
-            await driver.page.waitForSelector('.test-repo-blob')
+            await driver.page.waitForSelector('[data-testid="repo-blob"]')
             await driver.page.waitForSelector('.test-breadcrumb')
             // Uncomment this snapshot once https://github.com/sourcegraph/sourcegraph/issues/15126 is resolved
             // await percySnapshot(driver.page, this.test!.fullTitle())
@@ -279,7 +279,7 @@ describe('Blob viewer', () => {
 
         it.skip('shows a hover overlay from a hover provider when a token is hovered', async () => {
             await driver.page.goto(`${driver.sourcegraphBaseUrl}/${repositoryName}/-/blob/${fileName}`)
-            await driver.page.waitForSelector('.test-repo-blob')
+            await driver.page.waitForSelector('[data-testid="repo-blob"]')
             // TODO
         })
 
@@ -513,7 +513,7 @@ describe('Blob viewer', () => {
                         response.type('application/javascript; charset=utf-8').send(extensionBundleString)
                     })
             }
-            const timeout = 5000
+            const timeout = 10000
             await driver.page.goto(`${driver.sourcegraphBaseUrl}/github.com/sourcegraph/test/-/blob/test.ts`)
 
             // Wait for some line decoration attachment portal
@@ -785,6 +785,7 @@ describe('Blob viewer', () => {
 
             const timeout = 5000
             await driver.page.goto(`${driver.sourcegraphBaseUrl}/github.com/sourcegraph/test/-/blob/test.ts`)
+            await driver.page.waitForSelector('[data-testid="repo-blob"]')
 
             // File 1 (test.ts). Only line two contains 'word'
             try {
@@ -1072,7 +1073,7 @@ describe('Blob viewer', () => {
                 await driver.page.waitForFunction(
                     () =>
                         document
-                            .querySelector('.test-repo-blob [data-line="1"]')
+                            .querySelector('[data-testid="repo-blob"] [data-line="1"]')
                             ?.nextElementSibling?.textContent?.includes('file path: test spaces.ts'),
                     { timeout: 5000 }
                 )
diff --git a/client/web/src/integration/nav.test.ts b/client/web/src/integration/nav.test.ts
index 4989353b236..d6455a92bd7 100644
--- a/client/web/src/integration/nav.test.ts
+++ b/client/web/src/integration/nav.test.ts
@@ -87,6 +87,8 @@ describe('GlobalNavbar', () => {
 
         test('is highlighted on search page', async () => {
             await driver.page.goto(driver.sourcegraphBaseUrl + '/search?q=test&patternType=regexp')
+            await driver.page.waitForSelector('[data-test-id="/search"]')
+            await driver.page.waitForSelector('[data-test-active="true"]')
 
             const active = await driver.page.evaluate(() =>
                 document.querySelector('[data-test-id="/search"]')?.getAttribute('data-test-active')
@@ -97,6 +99,8 @@ describe('GlobalNavbar', () => {
 
         test('is highlighted on repo page', async () => {
             await driver.page.goto(driver.sourcegraphBaseUrl + '/github.com/sourcegraph/sourcegraph')
+            await driver.page.waitForSelector('[data-test-id="/search"]')
+            await driver.page.waitForSelector('[data-test-active="true"]')
 
             const active = await driver.page.evaluate(() =>
                 document.querySelector('[data-test-id="/search"]')?.getAttribute('data-test-active')
@@ -107,6 +111,8 @@ describe('GlobalNavbar', () => {
 
         test('is highlighted on repo file page', async () => {
             await driver.page.goto(driver.sourcegraphBaseUrl + '/github.com/sourcegraph/sourcegraph/-/blob/README.md')
+            await driver.page.waitForSelector('[data-test-id="/search"]')
+            await driver.page.waitForSelector('[data-test-active="true"]')
 
             const active = await driver.page.evaluate(() =>
                 document.querySelector('[data-test-id="/search"]')?.getAttribute('data-test-active')
@@ -117,6 +123,8 @@ describe('GlobalNavbar', () => {
 
         test('is not highlighted on notebook page', async () => {
             await driver.page.goto(driver.sourcegraphBaseUrl + '/notebooks/id')
+            await driver.page.waitForSelector('[data-test-id="/search"]')
+            await driver.page.waitForSelector('[data-test-active="false"]')
 
             const active = await driver.page.evaluate(() =>
                 document.querySelector('[data-test-id="/search"]')?.getAttribute('data-test-active')
diff --git a/client/web/src/integration/profile.test.ts b/client/web/src/integration/profile.test.ts
index 7ff6e393483..a253ff6da7e 100644
--- a/client/web/src/integration/profile.test.ts
+++ b/client/web/src/integration/profile.test.ts
@@ -61,9 +61,9 @@ describe('User profile page', () => {
             UpdateUser: () => ({ updateUser: { ...USER, displayName: 'Test2' } }),
         })
         await driver.page.goto(driver.sourcegraphBaseUrl + '/users/test/settings/profile')
+        await driver.page.waitForSelector('[data-testid="user-profile-form-fields"]')
         await percySnapshotWithVariants(driver.page, 'User Profile Settings Page')
         await accessibilityAudit(driver.page)
-        await driver.page.waitForSelector('[data-testid="user-profile-form-fields"]')
         await driver.replaceText({
             selector: '[data-testid="test-UserProfileFormFields__displayName"]',
             newText: 'Test2',
diff --git a/client/web/src/integration/repository.test.ts b/client/web/src/integration/repository.test.ts
index 6b923feacf1..4c4424340b7 100644
--- a/client/web/src/integration/repository.test.ts
+++ b/client/web/src/integration/repository.test.ts
@@ -82,6 +82,7 @@ describe('Repository', () => {
             const shortRepositoryName = 'sourcegraph/jsonrpc2'
             const repositoryName = `github.com/${shortRepositoryName}`
             const repositorySourcegraphUrl = `/${repositoryName}`
+            const commitUrl = `${repositorySourcegraphUrl}/-/commit/15c2290dcb37731cc4ee5a2a1c1e5a25b4c28f81?visible=1`
             const clickedFileName = 'async.go'
             const clickedCommit = ''
             const fileEntries = ['jsonrpc2.go', clickedFileName]
@@ -136,10 +137,8 @@ describe('Repository', () => {
                                                     '/github.com/sourcegraph/jsonrpc2/-/commit/9e615b1c32cc519130575e8d10d0d0fee8a5eb6c',
                                             },
                                         ],
-                                        url:
-                                            '/github.com/sourcegraph/jsonrpc2/-/commit/15c2290dcb37731cc4ee5a2a1c1e5a25b4c28f81',
-                                        canonicalURL:
-                                            '/github.com/sourcegraph/jsonrpc2/-/commit/15c2290dcb37731cc4ee5a2a1c1e5a25b4c28f81',
+                                        url: commitUrl,
+                                        canonicalURL: commitUrl,
                                         externalURLs: [
                                             {
                                                 url:
@@ -312,9 +311,8 @@ describe('Repository', () => {
                                         '/github.com/sourcegraph/jsonrpc2/-/commit/9e615b1c32cc519130575e8d10d0d0fee8a5eb6c',
                                 },
                             ],
-                            url: '/github.com/sourcegraph/jsonrpc2/-/commit/15c2290dcb37731cc4ee5a2a1c1e5a25b4c28f81',
-                            canonicalURL:
-                                '/github.com/sourcegraph/jsonrpc2/-/commit/15c2290dcb37731cc4ee5a2a1c1e5a25b4c28f81',
+                            url: commitUrl,
+                            canonicalURL: commitUrl,
                             externalURLs: [
                                 {
                                     url:
@@ -414,7 +412,7 @@ describe('Repository', () => {
                 })
             }, 'Blob')
 
-            await driver.page.waitForSelector('.test-repo-blob')
+            await driver.page.waitForSelector('[data-testid="repo-blob"]')
             await driver.assertWindowLocation(`/${repositoryName}/-/blob/${clickedFileName}`)
 
             // Assert breadcrumb order
@@ -436,7 +434,10 @@ describe('Repository', () => {
                 selector: '[data-testid="git-commit-node-oid"]',
                 action: 'click',
             })
+            await driver.page.waitForSelector('[data-testid="repository-commit-page"]')
             await driver.page.waitForSelector('[data-testid="git-commit-node-message-subject"]')
+            await driver.assertWindowLocation(commitUrl)
+
             await assertSelectorHasText(
                 '[data-testid="git-commit-node-message-subject"]',
                 'update LSIF indexing CI workflow'
@@ -494,7 +495,7 @@ describe('Repository', () => {
 
             // page.click() fails for some reason with Error: Node is either not visible or not an HTMLElement
             await driver.page.$eval('.test-tree-file-link', linkElement => (linkElement as HTMLElement).click())
-            await driver.page.waitForSelector('.test-repo-blob')
+            await driver.page.waitForSelector('[data-testid="repo-blob"]')
 
             await driver.page.waitForSelector('.test-breadcrumb')
             const breadcrumbTexts = await driver.page.evaluate(() =>
@@ -522,7 +523,9 @@ describe('Repository', () => {
                 "https://github.com/ggilmore/q-test/blob/master/Geoffrey's%20random%20queries.32r242442bf/%25%20token.4288249258.sql"
             )
 
-            const blobContent = await driver.page.evaluate(() => document.querySelector('.test-repo-blob')?.textContent)
+            const blobContent = await driver.page.evaluate(
+                () => document.querySelector('[data-testid="repo-blob"]')?.textContent
+            )
             assert.strictEqual(blobContent, `content for: ${filePath}\nsecond line\nthird line`)
         })
 
@@ -549,7 +552,7 @@ describe('Repository', () => {
 
             // page.click() fails for some reason with Error: Node is either not visible or not an HTMLElement
             await driver.page.$eval('.test-tree-file-link', linkElement => (linkElement as HTMLElement).click())
-            await driver.page.waitForSelector('.test-repo-blob')
+            await driver.page.waitForSelector('[data-testid="repo-blob"]')
 
             await driver.page.waitForSelector('.test-breadcrumb')
             const breadcrumbTexts = await driver.page.evaluate(() =>
@@ -576,7 +579,7 @@ describe('Repository', () => {
 
             // page.click() fails for some reason with Error: Node is either not visible or not an HTMLElement
             await driver.page.$eval('.test-tree-file-link', linkElement => (linkElement as HTMLElement).click())
-            await driver.page.waitForSelector('.test-repo-blob')
+            await driver.page.waitForSelector('[data-testid="repo-blob"]')
 
             await driver.page.waitForSelector('.test-breadcrumb')
             const breadcrumbTexts = await driver.page.evaluate(() =>
@@ -1047,7 +1050,7 @@ describe('Repository', () => {
             await driver.page.goto(`${driver.sourcegraphBaseUrl}/${repoName}`)
 
             try {
-                await driver.page.waitForSelector('.test-file-decoration-container', { timeout: 5000 })
+                await driver.page.waitForSelector('.test-file-decoration-container', { timeout: 10000 })
             } catch {
                 throw new Error('Expected to see file decorations')
             }
diff --git a/client/web/src/integration/search.test.ts b/client/web/src/integration/search.test.ts
index 0b7021d1ab1..313adef7a07 100644
--- a/client/web/src/integration/search.test.ts
+++ b/client/web/src/integration/search.test.ts
@@ -235,6 +235,8 @@ describe('Search', () => {
                 test('Is set from the URL query parameter when loading a search-related page', async () => {
                     await driver.page.goto(driver.sourcegraphBaseUrl + '/search?q=foo')
                     const editor = await createEditorAPI(driver, queryInputSelector)
+                    await editor.waitForIt()
+                    await driver.page.waitForSelector('[data-testid="results-info-bar"]')
                     expect(await editor.getValue()).toStrictEqual('foo')
                     // Field value is cleared when navigating to a non search-related page
                     await driver.page.waitForSelector('a[href="/extensions"]')
@@ -243,6 +245,8 @@ describe('Search', () => {
                     expect(await editor.getValue()).toStrictEqual(undefined)
                     // Field value is restored when the back button is pressed
                     await driver.page.goBack()
+                    await editor.waitForIt()
+                    await driver.page.waitForSelector('[data-testid="results-info-bar"]')
                     expect(await editor.getValue()).toStrictEqual('foo')
                 })
 
diff --git a/client/web/src/main.tsx b/client/web/src/main.tsx
index 398a72f7a89..77f452c7a95 100644
--- a/client/web/src/main.tsx
+++ b/client/web/src/main.tsx
@@ -7,12 +7,14 @@ import '@sourcegraph/shared/src/polyfills'
 
 import './monitoring/initMonitoring'
 
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { OpenSourceWebApp } from './OpenSourceWebApp'
 
 // It's important to have a root component in a separate file to create a react-refresh boundary and avoid page reload.
 // https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#edits-always-lead-to-full-reload
 window.addEventListener('DOMContentLoaded', () => {
-    render(<OpenSourceWebApp />, document.querySelector('#root'))
+    const root = createRoot(document.querySelector('#root')!)
+
+    root.render(<OpenSourceWebApp />)
 })
diff --git a/client/web/src/nav/GlobalNavbar.tsx b/client/web/src/nav/GlobalNavbar.tsx
index df2840d8ab8..2b088148c02 100644
--- a/client/web/src/nav/GlobalNavbar.tsx
+++ b/client/web/src/nav/GlobalNavbar.tsx
@@ -77,7 +77,7 @@ interface Props
         CodeInsightsProps,
         BatchChangesProps {
     history: H.History
-    location: H.Location<{ query: string }>
+    location: H.Location
     authenticatedUser: AuthenticatedUser | null
     authRequired: boolean
     isSourcegraphDotCom: boolean
diff --git a/client/web/src/nav/UserNavItem.story.tsx b/client/web/src/nav/UserNavItem.story.tsx
index 859fa0018f9..adad9657398 100644
--- a/client/web/src/nav/UserNavItem.story.tsx
+++ b/client/web/src/nav/UserNavItem.story.tsx
@@ -73,11 +73,9 @@ const commonProps = (): UserNavItemProps => ({
     position: Position.bottomStart,
 })
 
-const OpenByDefaultWrapper: React.FunctionComponent<
-    React.PropsWithChildren<{
-        children: React.FunctionComponent<React.PropsWithChildren<{ menuButtonRef: React.Ref<HTMLButtonElement> }>>
-    }>
-> = ({ children }) => {
+const OpenByDefaultWrapper: React.FunctionComponent<{
+    children: React.FunctionComponent<React.PropsWithChildren<{ menuButtonRef: React.Ref<HTMLButtonElement> }>>
+}> = ({ children }) => {
     const menuButtonReference = useRef<HTMLButtonElement>(null)
 
     useEffect(() => {
diff --git a/client/web/src/repo/blob/Blob.tsx b/client/web/src/repo/blob/Blob.tsx
index 91f7fb20057..ffbadabe1f4 100644
--- a/client/web/src/repo/blob/Blob.tsx
+++ b/client/web/src/repo/blob/Blob.tsx
@@ -113,6 +113,7 @@ export interface BlobProps
     wrapCode: boolean
     /** The current text document to be rendered and provided to extensions */
     blobInfo: BlobInfo
+    'data-testid'?: string
 
     // Experimental reference panel
     disableStatusBar: boolean
@@ -196,7 +197,15 @@ const STATUS_BAR_VERTICAL_GAP_VAR = '--blob-status-bar-vertical-gap'
  * in this state, hovers can lead to errors like `DocumentNotFoundError`.
  */
 export const Blob: React.FunctionComponent<React.PropsWithChildren<BlobProps>> = props => {
-    const { location, isLightTheme, extensionsController, blobInfo, platformContext, settingsCascade } = props
+    const {
+        location,
+        isLightTheme,
+        extensionsController,
+        blobInfo,
+        platformContext,
+        settingsCascade,
+        'data-testid': dataTestId,
+    } = props
 
     const settingsChanges = useMemo(() => new BehaviorSubject<Settings | null>(null), [])
     useEffect(() => {
@@ -783,7 +792,12 @@ export const Blob: React.FunctionComponent<React.PropsWithChildren<BlobProps>> =
 
     return (
         <>
-            <div className={classNames(props.className, styles.blob)} ref={nextBlobElement} tabIndex={-1}>
+            <div
+                data-testid={dataTestId}
+                className={classNames(props.className, styles.blob)}
+                ref={nextBlobElement}
+                tabIndex={-1}
+            >
                 <Code
                     className={classNames('test-blob', styles.blobCode, props.wrapCode && styles.blobCodeWrapped)}
                     ref={nextCodeViewElement}
diff --git a/client/web/src/repo/blob/BlobPage.tsx b/client/web/src/repo/blob/BlobPage.tsx
index 8b4d2b84383..9d424b12b39 100644
--- a/client/web/src/repo/blob/BlobPage.tsx
+++ b/client/web/src/repo/blob/BlobPage.tsx
@@ -365,7 +365,8 @@ export const BlobPage: React.FunctionComponent<React.PropsWithChildren<Props>> =
             {/* Render the (unhighlighted) blob also in the case highlighting timed out */}
             {renderMode === 'code' && (
                 <Blob
-                    className={classNames('test-repo-blob', styles.blob, styles.border)}
+                    data-testid="repo-blob"
+                    className={classNames(styles.blob, styles.border)}
                     blobInfo={blobInfoOrError}
                     wrapCode={wrapCode}
                     platformContext={props.platformContext}
diff --git a/client/web/src/repo/commit/RepositoryCommitPage.tsx b/client/web/src/repo/commit/RepositoryCommitPage.tsx
index a8f1364b1c2..f84604634fc 100644
--- a/client/web/src/repo/commit/RepositoryCommitPage.tsx
+++ b/client/web/src/repo/commit/RepositoryCommitPage.tsx
@@ -88,8 +88,9 @@ const queryCommit = memoizeObservable(
                 }
                 if (!data.node.commit) {
                     // Filter out any revision not found errors, they usually come in multiples when searching for a commit, we want to replace all of them with 1 "Commit not found" error
+                    // TODO: Figuring why should we use `errors` here since it is `undefined` in this place
                     const errorsWithoutRevisionError = errors?.filter(
-                        error => !error.message.includes('revision not found')
+                        (error: { message: string | string[] }) => !error.message.includes('revision not found')
                     )
 
                     const revisionErrorsFiltered =
@@ -258,7 +259,11 @@ export class RepositoryCommitPage extends React.Component<Props, State> {
 
     public render(): JSX.Element | null {
         return (
-            <div className={classNames('p-3', styles.repositoryCommitPage)} ref={this.nextRepositoryCommitPageElement}>
+            <div
+                data-testid="repository-commit-page"
+                className={classNames('p-3', styles.repositoryCommitPage)}
+                ref={this.nextRepositoryCommitPageElement}
+            >
                 <PageTitle
                     title={
                         this.state.commitOrError && !isErrorLike(this.state.commitOrError)
diff --git a/client/web/src/repo/commits/GitCommitNode.tsx b/client/web/src/repo/commits/GitCommitNode.tsx
index eb804b4d2ba..cbee5b1f2c9 100644
--- a/client/web/src/repo/commits/GitCommitNode.tsx
+++ b/client/web/src/repo/commits/GitCommitNode.tsx
@@ -51,7 +51,7 @@ export interface GitCommitNodeProps {
     preferAbsoluteTimestamps?: boolean
 
     /** Fragment to show at the end to the right of the SHA. */
-    afterElement?: React.ReactFragment
+    afterElement?: React.ReactNode
 
     /** Determine the git diff visualization UI */
     diffMode?: DiffMode
@@ -99,7 +99,7 @@ export const GitCommitNode: React.FunctionComponent<React.PropsWithChildren<GitC
         DeprecatedTooltipController.forceUpdate()
     }, [flashCopiedToClipboardMessage])
 
-    const copyToClipboard = useCallback((oid): void => {
+    const copyToClipboard = useCallback((oid: string): void => {
         eventLogger.log('CommitSHACopiedToClipboard')
         copy(oid)
         setFlashCopiedToClipboardMessage(true)
diff --git a/client/web/src/repo/settings/RepoSettingsMirrorPage.tsx b/client/web/src/repo/settings/RepoSettingsMirrorPage.tsx
index 0aea5c9b11c..ecaaa39db3b 100644
--- a/client/web/src/repo/settings/RepoSettingsMirrorPage.tsx
+++ b/client/web/src/repo/settings/RepoSettingsMirrorPage.tsx
@@ -66,9 +66,9 @@ class UpdateMirrorRepositoryActionContainer extends React.PureComponent<UpdateMi
     }
 
     public render(): JSX.Element | null {
-        let title: React.ReactFragment
-        let description: React.ReactFragment
-        let buttonLabel: React.ReactFragment
+        let title: React.ReactNode
+        let description: React.ReactNode
+        let buttonLabel: React.ReactNode
         let buttonDisabled = false
         let info: React.ReactNode
         if (this.props.repo.mirrorInfo.cloneInProgress) {
diff --git a/client/web/src/repo/settings/components/ActionContainer.tsx b/client/web/src/repo/settings/components/ActionContainer.tsx
index 506466aa168..01441e57d16 100644
--- a/client/web/src/repo/settings/components/ActionContainer.tsx
+++ b/client/web/src/repo/settings/components/ActionContainer.tsx
@@ -11,10 +11,10 @@ import styles from './ActionContainer.module.scss'
 
 export const BaseActionContainer: React.FunctionComponent<
     React.PropsWithChildren<{
-        title: React.ReactFragment
-        description: React.ReactFragment
-        action: React.ReactFragment
-        details?: React.ReactFragment
+        title: React.ReactNode
+        description: React.ReactNode
+        action: React.ReactNode
+        details?: React.ReactNode
         className?: string
     }>
 > = ({ title, description, action, details, className }) => (
@@ -31,10 +31,10 @@ export const BaseActionContainer: React.FunctionComponent<
 )
 
 interface Props {
-    title: React.ReactFragment
-    description: React.ReactFragment
+    title: React.ReactNode
+    description: React.ReactNode
     buttonClassName?: string
-    buttonLabel: React.ReactFragment
+    buttonLabel: React.ReactNode
     buttonSubtitle?: string
     buttonDisabled?: boolean
     info?: React.ReactNode
diff --git a/client/web/src/savedSearches/SavedSearchListPage.tsx b/client/web/src/savedSearches/SavedSearchListPage.tsx
index 8290029993c..e60236f2f1d 100644
--- a/client/web/src/savedSearches/SavedSearchListPage.tsx
+++ b/client/web/src/savedSearches/SavedSearchListPage.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { mdiMessageTextOutline, mdiCog, mdiDelete, mdiPlus } from '@mdi/js'
 import { VisuallyHidden } from '@reach/visually-hidden'
 import classNames from 'classnames'
-import { RouteComponentProps } from 'react-router'
+import { RouteComponentProps, useLocation } from 'react-router'
 import { Subject, Subscription } from 'rxjs'
 import { catchError, map, mapTo, startWith, switchMap } from 'rxjs/operators'
 import { useCallbackRef } from 'use-callback-ref'
@@ -23,7 +23,7 @@ import { eventLogger } from '../tracking/eventLogger'
 
 import styles from './SavedSearchListPage.module.scss'
 
-interface NodeProps extends RouteComponentProps<{}, {}, { description?: string }>, SearchPatternTypeProps {
+interface NodeProps extends RouteComponentProps, SearchPatternTypeProps {
     savedSearch: GQL.ISavedSearch
     onDelete: () => void
     linkRef: React.MutableRefObject<HTMLAnchorElement | null> | null
@@ -126,7 +126,7 @@ interface State {
     savedSearchesOrError?: GQL.ISavedSearch[] | ErrorLike
 }
 
-interface Props extends RouteComponentProps<{}, {}, { description?: string }>, NamespaceProps {}
+interface Props extends RouteComponentProps, NamespaceProps {}
 
 export class SavedSearchListPage extends React.Component<Props, State> {
     public subscriptions = new Subscription()
@@ -188,6 +188,7 @@ const SavedSearchListPageContent: React.FunctionComponent<React.PropsWithChildre
     savedSearchesOrError,
     ...props
 }) => {
+    const location = useLocation<{ description?: string }>()
     const searchPatternType = useNavbarQueryState(state => state.searchPatternType)
     const callbackReference = useCallbackRef<HTMLAnchorElement>(null, ref => ref?.focus())
 
@@ -210,7 +211,7 @@ const SavedSearchListPageContent: React.FunctionComponent<React.PropsWithChildre
                 {namespaceSavedSearches.map(search => (
                     <SavedSearchNode
                         key={search.id}
-                        linkRef={props.location.state?.description === search.description ? callbackReference : null}
+                        linkRef={location.state?.description === search.description ? callbackReference : null}
                         {...props}
                         patternType={searchPatternType}
                         savedSearch={search}
diff --git a/client/web/src/search/helpers.tsx b/client/web/src/search/helpers.tsx
index b4d61c9081c..93cbea99e40 100644
--- a/client/web/src/search/helpers.tsx
+++ b/client/web/src/search/helpers.tsx
@@ -48,7 +48,7 @@ export function submitSearch({
         },
         { source }
     )
-    history.push(path, { ...history.location.state, query })
+    history.push(path, { ...(typeof history.location.state === 'object' ? history.location.state : null), query })
     if (activation) {
         activation.update({ DidSearch: true })
     }
diff --git a/client/web/src/site-admin/SiteAdminArea.tsx b/client/web/src/site-admin/SiteAdminArea.tsx
index 096225b9a94..40a3083f07e 100644
--- a/client/web/src/site-admin/SiteAdminArea.tsx
+++ b/client/web/src/site-admin/SiteAdminArea.tsx
@@ -47,7 +47,7 @@ export interface SiteAdminAreaRouteContext
     isSourcegraphDotCom: boolean
 
     /** This property is only used by {@link SiteAdminOverviewPage}. */
-    overviewComponents: readonly React.ComponentType<React.PropsWithChildren<unknown>>[]
+    overviewComponents: readonly React.ComponentType<React.PropsWithChildren<{}>>[]
 }
 
 export interface SiteAdminAreaRoute extends RouteDescriptor<SiteAdminAreaRouteContext> {}
diff --git a/client/web/src/site-admin/SiteAdminFeatureFlagConfigurationPage.tsx b/client/web/src/site-admin/SiteAdminFeatureFlagConfigurationPage.tsx
index fb4dde5657e..85b8e65c532 100644
--- a/client/web/src/site-admin/SiteAdminFeatureFlagConfigurationPage.tsx
+++ b/client/web/src/site-admin/SiteAdminFeatureFlagConfigurationPage.tsx
@@ -451,7 +451,7 @@ const FeatureFlagOverrideItem: FunctionComponent<
     const nsValue = orgID > 0 ? orgID : userID
 
     const onError = useCallback(
-        error => {
+        (error: Error) => {
             setError(error)
         },
         [setError]
diff --git a/client/web/src/site-admin/analytics/components/AnalyticsPageTitle.tsx b/client/web/src/site-admin/analytics/components/AnalyticsPageTitle.tsx
index a75fe91f304..769ad0ff87f 100644
--- a/client/web/src/site-admin/analytics/components/AnalyticsPageTitle.tsx
+++ b/client/web/src/site-admin/analytics/components/AnalyticsPageTitle.tsx
@@ -4,7 +4,7 @@ import { mdiChartLineVariant } from '@mdi/js'
 
 import { Badge, H1, Icon } from '@sourcegraph/wildcard'
 
-export const AnalyticsPageTitle: React.FunctionComponent = ({ children }) => (
+export const AnalyticsPageTitle: React.FunctionComponent<React.PropsWithChildren<{}>> = ({ children }) => (
     <div className="d-flex flex-column justify-content-between align-items-start">
         <Badge variant="merged">Experimental</Badge>
 
diff --git a/client/web/src/stores/notepad.test.ts b/client/web/src/stores/notepad.test.ts
index 26f70c4e921..bf4145f8455 100644
--- a/client/web/src/stores/notepad.test.ts
+++ b/client/web/src/stores/notepad.test.ts
@@ -1,4 +1,4 @@
-import { act } from '@testing-library/react-hooks'
+import { act } from '@testing-library/react'
 
 import { SearchPatternType } from '@sourcegraph/shared/src/graphql-operations'
 
diff --git a/client/web/src/theme.test.ts b/client/web/src/theme.test.ts
index fd8c68f9180..dbfe274f1ba 100644
--- a/client/web/src/theme.test.ts
+++ b/client/web/src/theme.test.ts
@@ -1,6 +1,6 @@
 // causes false positive on act()
 /* eslint-disable @typescript-eslint/no-floating-promises */
-import { act, renderHook } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 import { useThemeState } from './stores'
 import { ThemePreference } from './stores/themeState'
diff --git a/client/web/src/tour/components/Tour/TourContent.tsx b/client/web/src/tour/components/Tour/TourContent.tsx
index 791b79434ac..4d16e586106 100644
--- a/client/web/src/tour/components/Tour/TourContent.tsx
+++ b/client/web/src/tour/components/Tour/TourContent.tsx
@@ -23,7 +23,7 @@ interface TourContentProps {
     className?: string
 }
 
-const Header: React.FunctionComponent<{ onClose: () => void; title?: string }> = ({
+const Header: React.FunctionComponent<React.PropsWithChildren<{ onClose: () => void; title?: string }>> = ({
     children,
     onClose,
     title = 'Quick start',
@@ -36,7 +36,7 @@ const Header: React.FunctionComponent<{ onClose: () => void; title?: string }> =
     </div>
 )
 
-const Footer: React.FunctionComponent<{ completedCount: number; totalCount: number }> = ({
+const Footer: React.FunctionComponent<React.PropsWithChildren<{ completedCount: number; totalCount: number }>> = ({
     completedCount,
     totalCount,
 }) => (
@@ -50,7 +50,7 @@ const Footer: React.FunctionComponent<{ completedCount: number; totalCount: numb
     </Text>
 )
 
-const CompletedItem: React.FunctionComponent = ({ children }) => (
+const CompletedItem: React.FunctionComponent<React.PropsWithChildren<{}>> = ({ children }) => (
     <li className="d-flex align-items-start">
         <Icon
             size="sm"
@@ -62,7 +62,7 @@ const CompletedItem: React.FunctionComponent = ({ children }) => (
     </li>
 )
 
-export const TourContent: React.FunctionComponent<TourContentProps> = ({
+export const TourContent: React.FunctionComponent<React.PropsWithChildren<TourContentProps>> = ({
     onClose,
     tasks,
     variant,
diff --git a/client/web/src/tour/components/Tour/useTour.test.tsx b/client/web/src/tour/components/Tour/useTour.test.tsx
index b9c8c73d9a6..9fb8c4bd13b 100644
--- a/client/web/src/tour/components/Tour/useTour.test.tsx
+++ b/client/web/src/tour/components/Tour/useTour.test.tsx
@@ -1,5 +1,5 @@
-import { cleanup } from '@testing-library/react'
-import { renderHook, WrapperComponent, act } from '@testing-library/react-hooks'
+import { renderHook, cleanup, act } from '@testing-library/react'
+import { WrapperComponent } from '@testing-library/react-hooks'
 
 import { TemporarySettings } from '@sourcegraph/shared/src/settings/temporary/TemporarySettings'
 import { MockTemporarySettings } from '@sourcegraph/shared/src/settings/temporary/testUtils'
@@ -20,7 +20,7 @@ const getFieldsAsObject = (value: object): object =>
 const TourId = 'MockTour'
 
 const setup = (settings: TemporarySettings['onboarding.quickStartTour'] = {}) => {
-    const wrapper: WrapperComponent<{}> = ({ children }) => (
+    const wrapper: WrapperComponent<React.PropsWithChildren<{}>> = ({ children }) => (
         <MockTemporarySettings settings={{ 'onboarding.quickStartTour': settings }}>{children}</MockTemporarySettings>
     )
     return renderHook(() => useTour(TourId), { wrapper })
diff --git a/client/web/src/tracking/withActivation.tsx b/client/web/src/tracking/withActivation.tsx
index af49313d1fc..428ab6e28da 100644
--- a/client/web/src/tracking/withActivation.tsx
+++ b/client/web/src/tracking/withActivation.tsx
@@ -276,7 +276,7 @@ export const withActivation = <P extends ActivationProps>(
         private updateCompletionStatus = (update: Partial<ActivationCompletionStatus>): void =>
             this.updates.next(update)
 
-        public render(): React.ReactFragment | null {
+        public render(): React.ReactNode {
             const steps = this.steps()
             const activationProps: ActivationProps = {
                 activation: steps && {
diff --git a/client/web/src/types/graphiql/index.d.ts b/client/web/src/types/graphiql/index.d.ts
index cafbd7811c0..78e013108ce 100644
--- a/client/web/src/types/graphiql/index.d.ts
+++ b/client/web/src/types/graphiql/index.d.ts
@@ -87,7 +87,7 @@ declare module 'graphiql' {
         editorTheme?: string
     }
 
-    export default class GraphiQL extends React.Component<Props> {
+    export default class GraphiQL extends React.Component<React.PropsWithChildren<Props>> {
         public static Logo: React.ComponentClass<any>
         public static Toolbar: React.ComponentClass<any>
         public static Button: React.ComponentClass<any>
diff --git a/client/web/src/types/react-scroll-manager/index.d.ts b/client/web/src/types/react-scroll-manager/index.d.ts
new file mode 100644
index 00000000000..07f301e3f01
--- /dev/null
+++ b/client/web/src/types/react-scroll-manager/index.d.ts
@@ -0,0 +1,20 @@
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react'
+
+import { History } from 'history'
+
+export interface ScrollManagerProps {
+    history: History
+    sessionKey?: string
+    timeout?: number
+}
+
+export class ScrollManager extends React.Component<React.PropsWithChildrenq<ScrollManagerProps>> {}
+
+export class WindowScroller extends React.Component {}
+
+export interface ElementScrollerProps {
+    scrollKey: string
+}
+
+export class ElementScroller extends React.Component<React.PropsWithChildrenq<ElementScrollerProps>> {}
diff --git a/client/web/src/user/settings/codeHosts/AddCodeHostConnectionModal.tsx b/client/web/src/user/settings/codeHosts/AddCodeHostConnectionModal.tsx
index ca9c73c93ca..9e89930435e 100644
--- a/client/web/src/user/settings/codeHosts/AddCodeHostConnectionModal.tsx
+++ b/client/web/src/user/settings/codeHosts/AddCodeHostConnectionModal.tsx
@@ -36,7 +36,7 @@ export const AddCodeHostConnectionModal: React.FunctionComponent<
         onDidCancel: () => void
         onDidError: (error: ErrorLike) => void
 
-        hintFragment?: React.ReactFragment
+        hintFragment?: React.ReactNode
     }>
 > = ({ ownerID, serviceName, serviceKind, hintFragment, onDidAdd, onDidCancel, onDidError }) => {
     const [token, setToken] = useState<string>('')
diff --git a/client/web/src/user/settings/codeHosts/UpdateCodeHostConnectionModal.tsx b/client/web/src/user/settings/codeHosts/UpdateCodeHostConnectionModal.tsx
index ce0bcf7eec5..8d072f4643c 100644
--- a/client/web/src/user/settings/codeHosts/UpdateCodeHostConnectionModal.tsx
+++ b/client/web/src/user/settings/codeHosts/UpdateCodeHostConnectionModal.tsx
@@ -33,7 +33,7 @@ export const UpdateCodeHostConnectionModal: React.FunctionComponent<
         onDidCancel: () => void
         onDidError: (error: ErrorLike) => void
 
-        hintFragment?: React.ReactFragment
+        hintFragment?: React.ReactNode
     }>
 > = ({ serviceID, serviceConfig, serviceName, hintFragment, onDidUpdate, onDidCancel, onDidError }) => {
     const [token, setToken] = useState<string>('')
diff --git a/client/web/src/user/settings/codeHosts/modalHints.tsx b/client/web/src/user/settings/codeHosts/modalHints.tsx
index e675edc06fd..5d365ed169d 100644
--- a/client/web/src/user/settings/codeHosts/modalHints.tsx
+++ b/client/web/src/user/settings/codeHosts/modalHints.tsx
@@ -16,7 +16,7 @@ const MachineUserRecommendation = (
     </Text>
 )
 
-export const scopes: Partial<Record<ExternalServiceKind, React.ReactFragment>> = {
+export const scopes: Partial<Record<ExternalServiceKind, React.ReactNode>> = {
     [ExternalServiceKind.GITHUB]: (
         <small className="text-muted">
             Use an access token with <Code className={styles.codeInline}>repo</Code>,{' '}
@@ -35,7 +35,7 @@ export const scopes: Partial<Record<ExternalServiceKind, React.ReactFragment>> =
     ),
 }
 
-export const getMachineUserFragment = (serviceName: string): React.ReactFragment => (
+export const getMachineUserFragment = (serviceName: string): React.ReactNode => (
     <div className={styles.alertBodyBg + ' p-2 border border-2 rounded'}>
         <div className="px-2 py-1">
             <H4>
diff --git a/client/web/src/user/settings/profile/EditUserProfileForm.tsx b/client/web/src/user/settings/profile/EditUserProfileForm.tsx
index 5861f78524b..c32e1c2d6ed 100644
--- a/client/web/src/user/settings/profile/EditUserProfileForm.tsx
+++ b/client/web/src/user/settings/profile/EditUserProfileForm.tsx
@@ -27,7 +27,7 @@ export const UPDATE_USER = gql`
 interface Props {
     user: Pick<GQL.IUser, 'id' | 'viewerCanChangeUsername'>
     initialValue: UserProfileFormFieldsValue
-    after?: React.ReactFragment
+    after?: React.ReactNode
 }
 
 /**
diff --git a/client/wildcard/src/components/Collapse/Collapse.tsx b/client/wildcard/src/components/Collapse/Collapse.tsx
index ce56d2a41f5..92ea2e811dd 100644
--- a/client/wildcard/src/components/Collapse/Collapse.tsx
+++ b/client/wildcard/src/components/Collapse/Collapse.tsx
@@ -29,9 +29,7 @@ const DEFAULT_CONTEXT_VALUE: CollapseContextData = {
 
 const CollapseContext = createContext<CollapseContextData>(DEFAULT_CONTEXT_VALUE)
 
-export const Collapse: React.FunctionComponent<React.PropsWithChildren<CollapseProps>> = React.memo(function Collapse(
-    props
-) {
+export const Collapse: React.FunctionComponent<CollapseProps> = React.memo(function Collapse(props) {
     const { children, isOpen, openByDefault, onOpenChange = noop } = props
     const [isInternalOpen, setInternalOpen] = useState<boolean>(Boolean(openByDefault))
     const isControlled = isOpen !== undefined
@@ -40,7 +38,7 @@ export const Collapse: React.FunctionComponent<React.PropsWithChildren<CollapseP
     const collapseContent = ChildrenComponent ? <ChildrenComponent isOpen={isCollapseOpen} /> : children
 
     const setOpen = useCallback(
-        opened => {
+        (opened: boolean) => {
             if (!isControlled) {
                 setInternalOpen(opened)
                 return
diff --git a/client/wildcard/src/components/Feedback/FeedbackPrompt/FeedbackPrompt.story.tsx b/client/wildcard/src/components/Feedback/FeedbackPrompt/FeedbackPrompt.story.tsx
index b5f4826a7dd..cb88eb49d95 100644
--- a/client/wildcard/src/components/Feedback/FeedbackPrompt/FeedbackPrompt.story.tsx
+++ b/client/wildcard/src/components/Feedback/FeedbackPrompt/FeedbackPrompt.story.tsx
@@ -48,7 +48,7 @@ const handleErrorSubmit = () =>
         isHappinessFeedback: false,
     })
 
-export const FeedbackPromptWithSuccessResponse = () => (
+export const FeedbackPromptWithSuccessResponse: Story = () => (
     <>
         <H1>This is a feedbackPrompt with success response</H1>
         <FeedbackPrompt onSubmit={handleSuccessSubmit}>
diff --git a/client/wildcard/src/components/Feedback/FeedbackPrompt/FeedbackPrompt.tsx b/client/wildcard/src/components/Feedback/FeedbackPrompt/FeedbackPrompt.tsx
index 0444cb85ede..0d0477d5ba1 100644
--- a/client/wildcard/src/components/Feedback/FeedbackPrompt/FeedbackPrompt.tsx
+++ b/client/wildcard/src/components/Feedback/FeedbackPrompt/FeedbackPrompt.tsx
@@ -193,7 +193,7 @@ interface FeedbackPromptProps extends FeedbackPromptContentProps {
     children: React.FunctionComponent<React.PropsWithChildren<FeedbackPromptTriggerProps>> | ReactNode
 }
 
-export const FeedbackPrompt: React.FunctionComponent<React.PropsWithChildren<FeedbackPromptProps>> = ({
+export const FeedbackPrompt: React.FunctionComponent<FeedbackPromptProps> = ({
     openByDefault = false,
     onSubmit,
     children,
diff --git a/client/wildcard/src/components/Feedback/FeedbackPrompt/__snapshots__/FeedbackPrompt.test.tsx.snap b/client/wildcard/src/components/Feedback/FeedbackPrompt/__snapshots__/FeedbackPrompt.test.tsx.snap
index e3b47c9bac0..775e5156ae7 100644
--- a/client/wildcard/src/components/Feedback/FeedbackPrompt/__snapshots__/FeedbackPrompt.test.tsx.snap
+++ b/client/wildcard/src/components/Feedback/FeedbackPrompt/__snapshots__/FeedbackPrompt.test.tsx.snap
@@ -287,22 +287,20 @@ exports[`FeedbackPrompt should render submit error correctly 1`] = `
   <div
     aria-modal="true"
     class="floatingPanel popover menu"
-    hidden=""
     role="dialog"
-    style="visibility: hidden;"
   >
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
+      tabindex="-1"
     />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
+      tabindex="-1"
     />
     <div
-      data-focus-lock-disabled="false"
+      data-focus-lock-disabled="disabled"
     >
       <button
         class="close"
@@ -555,7 +553,7 @@ exports[`FeedbackPrompt should render submit error correctly 1`] = `
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
+      tabindex="-1"
     />
   </div>
 </body>
@@ -577,20 +575,22 @@ exports[`FeedbackPrompt should render submit success correctly 1`] = `
   <div
     aria-modal="true"
     class="floatingPanel popover menu"
+    hidden=""
     role="dialog"
+    style="visibility: hidden;"
   >
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
+      tabindex="0"
     />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
+      tabindex="1"
     />
     <div
-      data-focus-lock-disabled="disabled"
+      data-focus-lock-disabled="false"
     >
       <button
         class="close"
@@ -652,7 +652,7 @@ exports[`FeedbackPrompt should render submit success correctly 1`] = `
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
+      tabindex="0"
     />
   </div>
 </body>
diff --git a/client/wildcard/src/components/Tabs/Tabs.story.tsx b/client/wildcard/src/components/Tabs/Tabs.story.tsx
index 59a7e7b406b..47fa4474315 100644
--- a/client/wildcard/src/components/Tabs/Tabs.story.tsx
+++ b/client/wildcard/src/components/Tabs/Tabs.story.tsx
@@ -94,7 +94,12 @@ const TabsVariant: Story<TabsProps & { actions: boolean }> = args => {
     )
 }
 
-const Container: React.FunctionComponent<{ title: string; width?: number }> = ({ title, width, children }) => (
+interface ContainerProps {
+    title: string
+    width?: number
+}
+
+const Container: React.FunctionComponent<React.PropsWithChildren<ContainerProps>> = ({ title, width, children }) => (
     <>
         <H2 style={{ margin: '30px 0 10px 0' }}>{title}</H2>
         <div style={{ width: width ? `${width}px` : undefined }}>{children}</div>
diff --git a/client/wildcard/src/components/Tooltip/Tooltip.test.tsx b/client/wildcard/src/components/Tooltip/Tooltip.test.tsx
index 8793577da3d..2994e6b5e30 100644
--- a/client/wildcard/src/components/Tooltip/Tooltip.test.tsx
+++ b/client/wildcard/src/components/Tooltip/Tooltip.test.tsx
@@ -38,7 +38,7 @@ describe('Tooltip', () => {
         userEvent.hover(rendered.getByTestId('trigger-1'))
 
         await waitFor(() => {
-            expect(rendered.getByTestId('trigger-1')).toHaveAttribute('aria-describedby', 'radix-0')
+            expect(rendered.getByTestId('trigger-1')).toHaveAttribute('aria-describedby', 'radix-:r0:')
             expect(rendered.getByTestId('trigger-2')).not.toHaveAttribute('aria-describedby')
 
             // Should be one tooltip for visual users, and a second for use with aria-describedby
@@ -46,21 +46,21 @@ describe('Tooltip', () => {
             expect(tooltips).toHaveLength(2)
             expect(tooltips[0]).toHaveTextContent('Tooltip 1')
             expect(tooltips[1]).toHaveTextContent('Tooltip 1')
-            expect(tooltips[1]).toHaveAttribute('id', 'radix-0')
+            expect(tooltips[1]).toHaveAttribute('id', 'radix-:r0:')
         })
 
         userEvent.hover(rendered.getByTestId('trigger-2'))
 
         await waitFor(() => {
             expect(rendered.getByTestId('trigger-1')).not.toHaveAttribute('aria-describedby')
-            expect(rendered.getByTestId('trigger-2')).toHaveAttribute('aria-describedby', 'radix-1')
+            expect(rendered.getByTestId('trigger-2')).toHaveAttribute('aria-describedby', 'radix-:r1:')
 
             // Should be one tooltip for visual users, and a second for use with aria-describedby
             const tooltips = rendered.getAllByRole('tooltip')
             expect(tooltips).toHaveLength(2)
             expect(tooltips[0]).toHaveTextContent('Tooltip 2')
             expect(tooltips[1]).toHaveTextContent('Tooltip 2')
-            expect(tooltips[1]).toHaveAttribute('id', 'radix-1')
+            expect(tooltips[1]).toHaveAttribute('id', 'radix-:r1:')
         })
     })
 
@@ -85,7 +85,8 @@ describe('Tooltip', () => {
             expect(rendered.getAllByRole('tooltip')).toHaveLength(2)
         })
 
-        userEvent.type(rendered.getByTestId('trigger-1'), '{esc}')
+        // Not sure why `userEvent.type(rendered.getByTestId('trigger-1'), '{esc}')` doesn't work
+        await userEvent.type(rendered.getByTestId('trigger-1'), '_{esc}', { delay: 1 })
 
         await waitFor(() => {
             expect(rendered.queryByRole('tooltip')).not.toBeInTheDocument()
diff --git a/client/wildcard/src/hooks/useObservable.test.ts b/client/wildcard/src/hooks/useObservable.test.ts
index 96db261ac7b..009e7a63b2a 100644
--- a/client/wildcard/src/hooks/useObservable.test.ts
+++ b/client/wildcard/src/hooks/useObservable.test.ts
@@ -3,7 +3,7 @@
 
 import { useMemo, useCallback } from 'react'
 
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import { Observable, Subscriber } from 'rxjs'
 import { map } from 'rxjs/operators'
 import * as sinon from 'sinon'
@@ -46,9 +46,14 @@ describe('useObservable()', () => {
         const subscribe = sinon.spy((subscriber: Subscriber<number>) => {
             subscriber.error(error)
         })
-        const { result } = renderHook(() => useObservable(useMemo(() => new Observable<number>(subscribe), [])))
-        expect(result.error).toBe(error)
-        sinon.assert.calledOnce(subscribe)
+
+        try {
+            renderHook(() => useObservable(useMemo(() => new Observable<number>(subscribe), [])))
+            fail('expected error to be thrown')
+        } catch (error) {
+            expect(error).toBe(error)
+            sinon.assert.calledOnce(subscribe)
+        }
     })
 
     it('should subscribe if component rerenders and observable changed', () => {
diff --git a/client/wildcard/src/hooks/useObservable.ts b/client/wildcard/src/hooks/useObservable.ts
index ab1c634a033..65cd4824599 100644
--- a/client/wildcard/src/hooks/useObservable.ts
+++ b/client/wildcard/src/hooks/useObservable.ts
@@ -42,12 +42,12 @@ export function useObservableWithStatus<T>(observable: Observable<T>): [T | unde
     const [currentValue, setCurrentValue] = useState<T>()
     const [status, setStatus] = useState<ObservableStatus>('initial')
 
-    const handleNext = useCallback(value => {
+    const handleNext = useCallback((value: T) => {
         setCurrentValue(value)
         setStatus('next')
     }, [])
 
-    const handleError = useCallback(error => {
+    const handleError = useCallback((error: unknown) => {
         setError(error)
         setStatus('error')
     }, [])
diff --git a/client/wildcard/src/hooks/useTimeoutManager.test.ts b/client/wildcard/src/hooks/useTimeoutManager.test.ts
index 1ae93f27acc..9476c38ebfe 100644
--- a/client/wildcard/src/hooks/useTimeoutManager.test.ts
+++ b/client/wildcard/src/hooks/useTimeoutManager.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import * as sinon from 'sinon'
 
 import { useTimeoutManager } from './useTimeoutManager'
diff --git a/client/wildcard/src/types.ts b/client/wildcard/src/types.ts
index 774619a5d9c..3165a53d5c8 100644
--- a/client/wildcard/src/types.ts
+++ b/client/wildcard/src/types.ts
@@ -6,6 +6,10 @@ export type ForwardReferenceExoticComponent<E, OwnProps> = React.ForwardRefExoti
     Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & { as?: E }>
 >
 
+type PropsWithChildren<P> = P &
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ({ children?: React.ReactNode | undefined } | { children: (...args: any[]) => React.ReactNode })
+
 export interface ForwardReferenceComponent<
     IntrinsicElementString,
     OwnProps = {}
@@ -25,7 +29,7 @@ export interface ForwardReferenceComponent<
     <As = IntrinsicElementString>(
         props: As extends ''
             ? { as: keyof JSX.IntrinsicElements }
-            : As extends React.ComponentType<React.PropsWithChildren<infer P>>
+            : As extends React.ComponentType<PropsWithChildren<infer P>>
             ? Merge<P, OwnProps & { as: As }>
             : As extends keyof JSX.IntrinsicElements
             ? Merge<JSX.IntrinsicElements[As], OwnProps & { as: As }>
diff --git a/package.json b/package.json
index 6f2e473d8ff..62b05044157 100644
--- a/package.json
+++ b/package.json
@@ -160,8 +160,8 @@
     "@terminus-term/to-string-loader": "^1.1.7-beta.1",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/babel__core": "7.1.12",
     "@types/bloomfilter": "0.0.0",
@@ -208,14 +208,14 @@
     "@types/pollyjs__core": "4.3.1",
     "@types/pollyjs__persister-fs": "2.0.1",
     "@types/puppeteer": "^5.4.5",
-    "@types/react": "17.0.43",
+    "@types/react": "18.0.8",
     "@types/react-circular-progressbar": "1.0.2",
-    "@types/react-dom": "17.0.14",
+    "@types/react-dom": "18.0.2",
     "@types/react-grid-layout": "1.3.0",
-    "@types/react-router": "5.1.10",
-    "@types/react-router-dom": "5.1.7",
+    "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.3.3",
     "@types/reactstrap": "8.4.2",
-    "@types/recharts": "1.8.18",
+    "@types/recharts": "1.8.23",
     "@types/resize-observer-browser": "0.1.4",
     "@types/rimraf": "^3.0.2",
     "@types/sanitize-html": "2.3.0",
@@ -378,7 +378,7 @@
     "@reach/menu-button": "^0.16.2",
     "@reach/tabs": "^0.16.4",
     "@reach/visually-hidden": "^0.16.0",
-    "@react-aria/live-announcer": "^3.0.5",
+    "@react-aria/live-announcer": "^3.1.0",
     "@sentry/browser": "^6.13.2",
     "@slimsag/react-shortcuts": "^1.2.1",
     "@sourcegraph/extension-api-classes": "^1.1.0",
@@ -444,9 +444,9 @@
     "postcss-inset": "^1.0.0",
     "pretty-bytes": "^5.3.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
+    "react": "18.1.0",
     "react-circular-progressbar": "^2.0.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "18.1.0",
     "react-dom-confetti": "^0.1.4",
     "react-elm-components": "^1.1.0",
     "react-focus-lock": "^2.7.1",
diff --git a/yarn.lock b/yarn.lock
index d7b3e6cb7be..d717098ca3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3754,51 +3754,12 @@
     prop-types "^15.7.2"
     tslib "^2.3.0"
 
-"@react-aria/interactions@^3.8.3":
-  version "3.8.3"
-  resolved "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.8.3.tgz#31a913acee8199a827fe351f7d867a10706477a1"
-  integrity sha512-zffWRqhEk4SQNbr5sv3BnMIsmQjtdhXvv3FLn9Ch0HxxGb8VStjrVPEv7r9OtVodab+ThcUehL4NJ8zU/U/4ew==
+"@react-aria/live-announcer@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@react-aria/live-announcer/-/live-announcer-3.1.0.tgz#06cfce35f6a9bcff266ab0ceab97f2fe6e487975"
+  integrity sha512-YEaGJh1ELho3G9zvUZGOsKsSNEqHsm0fb3Ngvj9z0tjZCXa0867h8YWKuiyTA9BG7WhH8eeJq07WN4nDvYU7fg==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/utils" "^3.11.3"
-    "@react-types/shared" "^3.11.2"
-
-"@react-aria/live-announcer@^3.0.5":
-  version "3.0.5"
-  resolved "https://registry.npmjs.org/@react-aria/live-announcer/-/live-announcer-3.0.5.tgz#88435202e7d22c33ca5770b605df89fe028e17d2"
-  integrity sha512-soIfCI8koNu3ZFlXzeYFnw3nzYqXt/yMDq9lhGXe/XbJ7Zq8m5Q4f+JhMhnAMN2OmazysJafXuq7rLp8wCv/TA==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-aria/utils" "^3.11.3"
-    "@react-aria/visually-hidden" "^3.2.7"
-
-"@react-aria/ssr@^3.1.2":
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.2.tgz#665a6fd56385068c7417922af2d0d71b0618e52d"
-  integrity sha512-amXY11ImpokvkTMeKRHjsSsG7v1yzzs6yeqArCyBIk60J3Yhgxwx9Cah+Uu/804ATFwqzN22AXIo7SdtIaMP+g==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-
-"@react-aria/utils@^3.11.3":
-  version "3.11.3"
-  resolved "https://registry.npmjs.org/@react-aria/utils/-/utils-3.11.3.tgz#fd870e1c4b994967883d5d5dae6b14b4e6da2d16"
-  integrity sha512-EH3SyA3FtbhuOj1cgGveiEYidKe3CgGYkP8D57O46rlTWcgTxhGHUEibGeJw3PFXxmbgm5RIOdBo29YwItvtcQ==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-aria/ssr" "^3.1.2"
-    "@react-stately/utils" "^3.4.1"
-    "@react-types/shared" "^3.11.2"
-    clsx "^1.1.1"
-
-"@react-aria/visually-hidden@^3.2.7":
-  version "3.2.7"
-  resolved "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.2.7.tgz#1b88892e10648c5fe6634be325baa66430c3e53f"
-  integrity sha512-rvE0N91nBa7DxcH6KyapjttWQJFhRqeFBfGA9oCeGgTYLsn5CBvnKMLQEm2Z7ZlUcl08Xh2nB2KxKrRQ4ldYlw==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-aria/interactions" "^3.8.3"
-    "@react-aria/utils" "^3.11.3"
-    clsx "^1.1.1"
 
 "@react-spring/animated@~9.4.0":
   version "9.4.2"
@@ -3886,18 +3847,6 @@
     "@react-spring/shared" "~9.4.0"
     "@react-spring/types" "~9.4.0"
 
-"@react-stately/utils@^3.4.1":
-  version "3.4.1"
-  resolved "https://registry.npmjs.org/@react-stately/utils/-/utils-3.4.1.tgz#56f049aa1704d338968b5973c796ee606e9c0c62"
-  integrity sha512-mjFbKklj/W8KRw1CQSpUJxHd7lhUge4i00NwJTwGxbzmiJgsTWlKKS/1rBf48ey9hUBopXT5x5vG/AxQfWTQug==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-
-"@react-types/shared@^3.11.2":
-  version "3.11.2"
-  resolved "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz#b269c0cf6223664ac42d980b7add1b67b51b87d4"
-  integrity sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==
-
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -5235,7 +5184,7 @@
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
-"@testing-library/dom@^8.0.0", "@testing-library/dom@^8.13.0":
+"@testing-library/dom@^8.13.0", "@testing-library/dom@^8.5.0":
   version "8.13.0"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
   integrity sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==
@@ -5264,25 +5213,22 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react-hooks@^7.0.2":
-  version "7.0.2"
-  resolved "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz#3388d07f562d91e7f2431a4a21b5186062ecfee0"
-  integrity sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==
+"@testing-library/react-hooks@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.0.tgz#7d0164bffce4647f506039de0a97f6fcbd20f4bf"
+  integrity sha512-uZqcgtcUUtw7Z9N32W13qQhVAD+Xki2hxbTR461MKax8T6Jr8nsUvZB+vcBTkzY2nFvsUet434CsgF0ncW2yFw==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@types/react" ">=16.9.0"
-    "@types/react-dom" ">=16.9.0"
-    "@types/react-test-renderer" ">=16.9.0"
     react-error-boundary "^3.1.0"
 
-"@testing-library/react@^12.1.4":
-  version "12.1.4"
-  resolved "https://registry.npmjs.org/@testing-library/react/-/react-12.1.4.tgz#09674b117e550af713db3f4ec4c0942aa8bbf2c0"
-  integrity sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA==
+"@testing-library/react@^13.1.1":
+  version "13.2.0"
+  resolved "https://registry.npmjs.org/@testing-library/react/-/react-13.2.0.tgz#2db00bc94d71c4e90e5c25582e90a650ae2925bf"
+  integrity sha512-Bprbz/SZVONCJy5f7hcihNCv313IJXdYiv0nSJklIs1SQCIHHNlnGNkosSXnGZTmesyGIcBGNppYhXcc11pb7g==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
-    "@types/react-dom" "*"
+    "@testing-library/dom" "^8.5.0"
+    "@types/react-dom" "^18.0.0"
 
 "@testing-library/user-event@^13.5.0":
   version "13.5.0"
@@ -5718,10 +5664,10 @@
   resolved "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-9.12.4.tgz#8c3496bd1b50cc04aeefd691140aa571d4dbfa34"
   integrity sha512-t2szdkwmg2JJyuCM20e8kR2X59WCE5Zkl4bzm1u1Oukjm79zpbiAv+QjnwLnuuV0WHEcX2NgUItu0pAMKuOPww==
 
-"@types/history@*":
-  version "4.7.2"
-  resolved "https://registry.npmjs.org/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
-  integrity sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==
+"@types/history@^4.7.11":
+  version "4.7.11"
+  resolved "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
+  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.1"
@@ -6079,10 +6025,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@*", "@types/react-dom@17.0.14", "@types/react-dom@>=16.9.0":
-  version "17.0.14"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f"
-  integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==
+"@types/react-dom@18.0.2", "@types/react-dom@^18.0.0":
+  version "18.0.2"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.2.tgz#2d6b46557aa30257e87e67a6d952146d15979d79"
+  integrity sha512-UxeS+Wtj5bvLRREz9tIgsK4ntCuLDo0EcAcACgw3E+9wE8ePDr9uQpq53MfcyxyIS55xJ+0B6mDS8c4qkkHLBg==
   dependencies:
     "@types/react" "*"
 
@@ -6093,21 +6039,21 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-router-dom@5.1.7":
-  version "5.1.7"
-  resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz#a126d9ea76079ffbbdb0d9225073eb5797ab7271"
-  integrity sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==
+"@types/react-router-dom@^5.3.3":
+  version "5.3.3"
+  resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
+  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
   dependencies:
-    "@types/history" "*"
+    "@types/history" "^4.7.11"
     "@types/react" "*"
     "@types/react-router" "*"
 
-"@types/react-router@*", "@types/react-router@5.1.10":
-  version "5.1.10"
-  resolved "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.10.tgz#7de7ad3df20a8adb2b97943f1871ca4d2705c42c"
-  integrity sha512-yu11Hu16CfGvvBWc7wluRlxbwfuSlY0snEntbbOTvfgMvyO6uLaEpAbnVOntr+9TNIpR++OOlPkmDcJPxOXRaQ==
+"@types/react-router@*", "@types/react-router@^5.1.18":
+  version "5.1.18"
+  resolved "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz#c8851884b60bc23733500d86c1266e1cfbbd9ef3"
+  integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==
   dependencies:
-    "@types/history" "*"
+    "@types/history" "^4.7.11"
     "@types/react" "*"
 
 "@types/react-syntax-highlighter@11.0.5":
@@ -6117,13 +6063,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-test-renderer@>=16.9.0":
-  version "17.0.1"
-  resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
-  integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-transition-group@^4.4.0":
   version "4.4.4"
   resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
@@ -6131,7 +6070,16 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.43", "@types/react@>=16.9.0", "@types/react@^17.0.0":
+"@types/react@*", "@types/react@18.0.8":
+  version "18.0.8"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.8.tgz#a051eb380a9fbcaa404550543c58e1cf5ce4ab87"
+  integrity sha512-+j2hk9BzCOrrOSJASi5XiOyBbERk9jG5O73Ya4M0env5Ixi6vUNli4qy994AINcEF+1IEHISYFfIT4zwr++LKw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@^17.0.0":
   version "17.0.43"
   resolved "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
   integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
@@ -6148,10 +6096,10 @@
     "@types/react" "*"
     popper.js "^1.14.1"
 
-"@types/recharts@1.8.18":
-  version "1.8.18"
-  resolved "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.18.tgz#dc7f2a27441ebc902b30ae7cd1d1af50381161db"
-  integrity sha512-wohEYbFZJDY+WbTdJKv/Z2y5T0qckZ40yUJhx+Pfbj5WynBhkBForFmGCigEFa0bIcaeoSeTNuCi9udGy2CeJQ==
+"@types/recharts@1.8.23":
+  version "1.8.23"
+  resolved "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.23.tgz#eeb6c52c6b2b916e9383bd5cf8fb5fd941c9c6fe"
+  integrity sha512-O/mIPm9f6dwRWfenOI3GQwsGta3x1YWjwqXOCZqC0MATQ6C+A+Jc8VxFnSUr4N3uYv64zkq90RwXFaMNbhJKvg==
   dependencies:
     "@types/d3-shape" "^1"
     "@types/react" "*"
@@ -9414,11 +9362,6 @@ cloneable-readable@^1.0.0:
     process-nextick-args "^2.0.0"
     readable-stream "^2.3.5"
 
-clsx@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
-  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
-
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -20799,14 +20742,13 @@ react-dom-confetti@^0.1.4:
   dependencies:
     dom-confetti "0.1.1"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
+  integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.22.0"
 
 react-draggable@^4.0.0, react-draggable@^4.0.3:
   version "4.4.3"
@@ -21134,13 +21076,12 @@ react-visibility-sensor@^5.1.1:
   dependencies:
     prop-types "^15.7.2"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.npmjs.org/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
+  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 reactstrap@^8.9.0:
   version "8.9.0"
@@ -22044,13 +21985,12 @@ scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
+  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@2.7.0, schema-utils@^2.6.5, schema-utils@^2.7.0:
   version "2.7.0"