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

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: heiskr

package-lock.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",

package.json

@@ -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

src/frame/components/ui/BumpLink/BumpLink.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 })}
     />
   )
-}
+})

src/frame/components/ui/MarkdownContent/MarkdownContent.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
 }
 

src/search/components/input/SearchBarButton.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: {

src/search/components/input/SearchOverlay.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({

src/search/components/input/SearchOverlayContainer.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