⚙️ Bump react and react-dom to v19 (#60891)

heiskr · Copilot · web-flow · commit 229c1024fe6d · 2026-05-01T14:47:49.000Z
Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -243,8 +243,8 @@
     "ora": "^9.3.0",
     "parse5": "7.1.2",
     "quick-lru": "7.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "react-is": "^19.2.4",
     "react-markdown": "^10.1.0",
     "rehype-highlight": "^7.0.2",
@@ -297,8 +297,8 @@
     "@types/lodash": "^4.17.24",
     "@types/lodash-es": "4.17.12",
     "@types/mdast": "^4.0.4",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/semver": "^7.7.1",
     "@types/styled-components": "^5.1.36",
     "@types/tcp-port-used": "1.0.4",
diff --git a/src/frame/components/ui/BumpLink/BumpLink.tsx b/src/frame/components/ui/BumpLink/BumpLink.tsx
@@ -5,7 +5,7 @@ import styles from './BumpLink.module.scss'
 
 export type BumpLinkPropsT = {
   children?: ReactNode
-  title: ReactElement | string
+  title: ReactElement<{ children?: ReactNode }> | string
   href: string
   as?: ElementType<{ className?: string; href: string }>
   className?: string
diff --git a/src/frame/components/ui/MarkdownContent/MarkdownContent.tsx b/src/frame/components/ui/MarkdownContent/MarkdownContent.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { memo, ReactNode } from 'react'
 import type { JSX } from 'react'
 import cx from 'classnames'
 
@@ -10,12 +10,15 @@ export type MarkdownContentPropsT = {
   as?: keyof JSX.IntrinsicElements
 }
 
-export const MarkdownContent = ({
+// Memoized so that re-renders of the parent (e.g. when ToolPicker/PlatformPicker
+// state updates) don't cause React 19 to re-apply `dangerouslySetInnerHTML` and
+// wipe out the inline `display` styles set imperatively by the pickers.
+export const MarkdownContent = memo(function MarkdownContent({
   children,
   as: Component = 'div',
   className,
   ...restProps
-}: MarkdownContentPropsT) => {
+}: MarkdownContentPropsT) {
   return (
     <Component
       {...restProps}
@@ -25,4 +28,4 @@ export const MarkdownContent = ({
         : { children })}
     />
   )
-}
+})
diff --git a/src/search/components/input/SearchBarButton.tsx b/src/search/components/input/SearchBarButton.tsx
@@ -12,7 +12,7 @@ type Props = {
   isSearchOpen: boolean
   setIsSearchOpen: (value: boolean) => void
   params: QueryParams
-  searchButtonRef: React.RefObject<HTMLButtonElement>
+  searchButtonRef: React.RefObject<HTMLButtonElement | null>
   instanceId?: string
 }
 
diff --git a/src/search/components/input/SearchOverlay.tsx b/src/search/components/input/SearchOverlay.tsx
@@ -34,7 +34,7 @@ import styles from './SearchOverlay.module.scss'
 
 type Props = {
   searchOverlayOpen: boolean
-  parentRef: RefObject<HTMLElement>
+  parentRef: RefObject<HTMLElement | null>
   debug: boolean
   onClose: () => void
   params: {
diff --git a/src/search/components/input/SearchOverlayContainer.tsx b/src/search/components/input/SearchOverlayContainer.tsx
@@ -7,7 +7,7 @@ type Props = {
   setIsSearchOpen: (value: boolean) => void
   params: QueryParams
   updateParams: (updates: Partial<QueryParams>) => void
-  searchButtonRef: React.RefObject<HTMLButtonElement>
+  searchButtonRef: React.RefObject<HTMLButtonElement | null>
 }
 
 export function SearchOverlayContainer({
diff --git a/src/tools/components/InArticlePicker.tsx b/src/tools/components/InArticlePicker.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useLayoutEffect, useState } from 'react'
 import Cookies from '@/frame/components/lib/cookies'
 import { UnderlineNav } from '@primer/react'
 import { sendEvent } from '@/events/components/events'
@@ -7,6 +7,8 @@ import { useRouter } from 'next/router'
 
 import styles from './InArticlePicker.module.scss'
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
 type Option = {
   value: string
   label: string
@@ -63,7 +65,11 @@ export const InArticlePicker = ({
 
   const [asPathRoot, asPathQuery = ''] = router.asPath.split('#')[0].split('?')
 
-  useEffect(() => {
+  // Use a layout effect so the DOM mutation (hiding non-matching .ghd-tool
+  // content) happens before the browser paints. With React 19's stricter
+  // effect timing, a regular useEffect could leave non-matching content
+  // visible on initial page load until after first paint.
+  useIsomorphicLayoutEffect(() => {
     // This will make the hook run this callback on mount and on change.
     // That's important because even though the user hasn't interacted
     // and made an overriding choice, we still want to run this callback

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ type Props = {`
`12`	`12`	`isSearchOpen: boolean`
`13`	`13`	`setIsSearchOpen: (value: boolean) => void`
`14`	`14`	`params: QueryParams`
`15`		`- searchButtonRef: React.RefObject<HTMLButtonElement>`
	`15`	`+ searchButtonRef: React.RefObject<HTMLButtonElement \| null>`
`16`	`16`	`instanceId?: string`
`17`	`17`	`}`
`18`	`18`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ type Props = {`
`7`	`7`	`setIsSearchOpen: (value: boolean) => void`
`8`	`8`	`params: QueryParams`
`9`	`9`	`updateParams: (updates: Partial<QueryParams>) => void`
`10`		`- searchButtonRef: React.RefObject<HTMLButtonElement>`
	`10`	`+ searchButtonRef: React.RefObject<HTMLButtonElement \| null>`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`export function SearchOverlayContainer({`