Bump React types to 19 rc (vercel#66186)

Author: eps1lon

package.json

@@ -107,8 +107,8 @@
     "@types/jest": "29.5.5",
     "@types/node": "20.12.3",
     "@types/node-fetch": "2.6.1",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
     "@types/relay-runtime": "14.1.13",
     "@types/string-hash": "1.1.1",
     "@types/trusted-types": "2.0.3",
@@ -251,8 +251,8 @@
     "@babel/parser": "7.22.5",
     "@babel/types": "7.22.5",
     "@babel/traverse": "7.22.5",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
     "react": "19.0.0-rc-f994737d14-20240522",
     "react-dom": "19.0.0-rc-f994737d14-20240522",
     "react-is": "19.0.0-rc-f994737d14-20240522",

packages/next/src/client/components/app-router-announcer.tsx

@@ -42,7 +42,7 @@ export function AppRouterAnnouncer({ tree }: { tree: FlightRouterState }) {
   }, [])
 
   const [routeAnnouncement, setRouteAnnouncement] = useState('')
-  const previousTitle = useRef<string | undefined>()
+  const previousTitle = useRef<string | undefined>(undefined)
 
   useEffect(() => {
     let currentTitle = ''

packages/next/src/client/components/error-boundary.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { type JSX } from 'react'
 import { usePathname } from './navigation'
 import { isNextRouterError } from './is-next-router-error'
 import { staticGenerationAsyncStorage } from './static-generation-async-storage.external'

packages/next/src/client/components/layout-router.tsx

@@ -18,6 +18,7 @@ import React, {
   startTransition,
   Suspense,
   useDeferredValue,
+  type JSX,
 } from 'react'
 import ReactDOM from 'react-dom'
 import {

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-websocket.ts

@@ -4,7 +4,7 @@ import { getSocketUrl } from './get-socket-url'
 import type { TurbopackMsgToBrowser } from '../../../../../server/dev/hot-reloader-types'
 
 export function useWebsocket(assetPrefix: string) {
-  const webSocketRef = useRef<WebSocket>()
+  const webSocketRef = useRef<WebSocket>(undefined)
 
   useEffect(() => {
     if (webSocketRef.current) {

packages/next/src/client/components/react-dev-overlay/shared.ts

@@ -94,7 +94,7 @@ export const INITIAL_OVERLAY_STATE: OverlayState = {
 }
 
 export function useErrorOverlayReducer() {
-  return useReducer<React.Reducer<OverlayState, BusEvent>>((_state, action) => {
+  return useReducer((_state: OverlayState, action: BusEvent): OverlayState => {
     switch (action.type) {
       case ACTION_BUILD_OK: {
         return { ..._state, buildError: null }

packages/next/src/client/components/render-from-template-context.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useContext } from 'react'
+import React, { useContext, type JSX } from 'react'
 import { TemplateContext } from '../../shared/lib/app-router-context.shared-runtime'
 
 export default function RenderFromTemplateContext(): JSX.Element {

packages/next/src/client/components/use-reducer-with-devtools.ts

@@ -103,8 +103,8 @@ function useReducerWithReduxDevtoolsImpl(
     throw new Error('Invariant: Missing ActionQueueContext')
   }
 
-  const devtoolsConnectionRef = useRef<ReduxDevToolsInstance>()
-  const enabledRef = useRef<boolean>()
+  const devtoolsConnectionRef = useRef<ReduxDevToolsInstance>(undefined)
+  const enabledRef = useRef<boolean>(undefined)
 
   useEffect(() => {
     if (devtoolsConnectionRef.current || enabledRef.current === false) {

packages/next/src/client/head-manager.ts

@@ -1,5 +1,7 @@
 import { setAttributesFromProps } from './set-attributes-from-props'
 
+import type { JSX } from 'react'
+
 function reactElementToDOM({ type, props }: JSX.Element): HTMLElement {
   const el: HTMLElement = document.createElement(type)
   setAttributesFromProps(el, props)

packages/next/src/client/index.tsx

@@ -8,7 +8,7 @@ import type {
   PrivateRouteInfo,
 } from '../shared/lib/router/router'
 
-import React from 'react'
+import React, { type JSX } from 'react'
 import ReactDOM from 'react-dom/client'
 import { HeadManagerContext } from '../shared/lib/head-manager-context.shared-runtime'
 import mitt from '../shared/lib/mitt'