Skip to content

Commit 2c31c79

Browse files
eps1lonhuozhi
eps1lon
and
huozhi
authored
Support React 19 in App and Pages router (#65058)
Closes NEXT-3218 --------- Co-authored-by: Jiachi Liu <[email protected]>
1 parent 1f598bc commit 2c31c79

File tree

547 files changed

+393733
-453016
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

547 files changed

+393733
-453016
lines changed

‎docs/02-app/01-building-your-application/02-data-fetching/02-server-actions-and-mutations.mdx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -358,10 +358,10 @@ export default async function createsUser(formData) {
358358
}
359359
```
360360

361-
Once the fields have been validated on the server, you can return a serializable object in your action and use the React [`useFormState`](https://react.dev/reference/react-dom/hooks/useFormState) hook to show a message to the user.
361+
Once the fields have been validated on the server, you can return a serializable object in your action and use the React [`useActionState`](https://react.dev/reference/react-dom/hooks/useActionState) hook to show a message to the user.
362362

363-
- By passing the action to `useFormState`, the action's function signature changes to receive a new `prevState` or `initialState` parameter as its first argument.
364-
- `useFormState` is a React hook and therefore must be used in a Client Component.
363+
- By passing the action to `useActionState`, the action's function signature changes to receive a new `prevState` or `initialState` parameter as its first argument.
364+
- `useActionState` is a React hook and therefore must be used in a Client Component.
365365

366366
```tsx filename="app/actions.ts" switcher
367367
'use server'
@@ -385,20 +385,20 @@ export async function createUser(prevState, formData) {
385385
}
386386
```
387387

388-
Then, you can pass your action to the `useFormState` hook and use the returned `state` to display an error message.
388+
Then, you can pass your action to the `useActionState` hook and use the returned `state` to display an error message.
389389

390390
```tsx filename="app/ui/signup.tsx" switcher
391391
'use client'
392392

393-
import { useFormState } from 'react-dom'
393+
import { useActionState } from 'react'
394394
import { createUser } from '@/app/actions'
395395

396396
const initialState = {
397397
message: '',
398398
}
399399

400400
export function Signup() {
401-
const [state, formAction] = useFormState(createUser, initialState)
401+
const [state, formAction] = useActionState(createUser, initialState)
402402

403403
return (
404404
<form action={formAction}>
@@ -417,15 +417,15 @@ export function Signup() {
417417
```jsx filename="app/ui/signup.js" switcher
418418
'use client'
419419

420-
import { useFormState } from 'react-dom'
420+
import { useActionState } from 'react'
421421
import { createUser } from '@/app/actions'
422422

423423
const initialState = {
424424
message: '',
425425
}
426426

427427
export function Signup() {
428-
const [state, formAction] = useFormState(createUser, initialState)
428+
const [state, formAction] = useActionState(createUser, initialState)
429429

430430
return (
431431
<form action={formAction}>
@@ -739,7 +739,7 @@ export async function createTodo(prevState, formData) {
739739
740740
> **Good to know:**
741741
>
742-
> - Aside from throwing the error, you can also return an object to be handled by `useFormState`. See [Server-side validation and error handling](#server-side-validation-and-error-handling).
742+
> - Aside from throwing the error, you can also return an object to be handled by `useActionState`. See [Server-side validation and error handling](#server-side-validation-and-error-handling).
743743
744744
### Revalidating data
745745
@@ -1002,5 +1002,5 @@ For more information on Server Actions, check out the following React docs:
10021002
- [`"use server"`](https://react.dev/reference/react/use-server)
10031003
- [`<form>`](https://react.dev/reference/react-dom/components/form)
10041004
- [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
1005-
- [`useFormState`](https://react.dev/reference/react-dom/hooks/useFormState)
1005+
- [`useActionState`](https://react.dev/reference/react-dom/hooks/useActionState)
10061006
- [`useOptimistic`](https://react.dev/reference/react/useOptimistic)

‎docs/02-app/01-building-your-application/09-authentication/index.mdx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ The examples on this page walk through basic username and password auth for educ
2929

3030
### Sign-up and login functionality
3131

32-
You can use the [`<form>`](https://react.dev/reference/react-dom/components/form) element with React's [Server Actions](/docs/app/building-your-application/rendering/server-components), [`useFormStatus()`](https://react.dev/reference/react-dom/hooks/useFormStatus), and [`useFormState()`](https://react.dev/reference/react-dom/hooks/useFormState) to capture user credentials, validate form fields, and call your Authentication Provider's API or database.
32+
You can use the [`<form>`](https://react.dev/reference/react-dom/components/form) element with React's [Server Actions](/docs/app/building-your-application/rendering/server-components), [`useFormStatus()`](https://react.dev/reference/react-dom/hooks/useFormStatus), and [`useActionState()`](https://react.dev/reference/react/useActionState) to capture user credentials, validate form fields, and call your Authentication Provider's API or database.
3333

3434
Since Server Actions always execute on the server, they provide a secure environment for handling authentication logic.
3535

@@ -200,16 +200,16 @@ export async function signup(state, formData) {
200200
}
201201
```
202202

203-
Back in your `<SignupForm />`, you can use React's `useFormState()` hook to display validation errors to the user:
203+
Back in your `<SignupForm />`, you can use React's `useActionState()` hook to display validation errors to the user:
204204

205205
```tsx filename="app/ui/signup-form.tsx" switcher highlight={7,15,21,27-36}
206206
'use client'
207207

208-
import { useFormState } from 'react-dom'
208+
import { useActionState } from 'react'
209209
import { signup } from '@/app/actions/auth'
210210

211211
export function SignupForm() {
212-
const [state, action] = useFormState(signup, undefined)
212+
const [state, action] = useActionState(signup, undefined)
213213

214214
return (
215215
<form action={action}>
@@ -248,11 +248,11 @@ export function SignupForm() {
248248
```jsx filename="app/ui/signup-form.js" switcher highlight={7,15,21,27-36}
249249
'use client'
250250

251-
import { useFormState } from 'react-dom'
251+
import { useActionState } from 'react'
252252
import { signup } from '@/app/actions/auth'
253253

254254
export function SignupForm() {
255-
const [state, action] = useFormState(signup, undefined)
255+
const [state, action] = useActionState(signup, undefined)
256256

257257
return (
258258
<form action={action}>
@@ -293,7 +293,8 @@ You can also use the `useFormStatus()` hook to handle the pending state on form
293293
```tsx filename="app/ui/signup-form.tsx" highlight={6} switcher
294294
'use client'
295295

296-
import { useFormStatus, useFormState } from 'react-dom'
296+
import { useActionState } from 'react'
297+
import { useFormStatus } from 'react-dom'
297298

298299
export function SignupButton() {
299300
const { pending } = useFormStatus()
@@ -309,7 +310,8 @@ export function SignupButton() {
309310
```jsx filename="app/ui/signup-form.js" highlight={6} switcher
310311
'use client'
311312

312-
import { useFormStatus, useFormState } from 'react-dom'
313+
import { useActionState } from 'react'
314+
import { useFormStatus } from 'react-dom'
313315

314316
export function SignupButton() {
315317
const { pending } = useFormStatus()

‎examples/next-forms/app/add-form.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

3-
import { useFormState, useFormStatus } from "react-dom";
3+
import { useActionState } from "react";
4+
import { useFormStatus } from "react-dom";
45
import { createTodo } from "@/app/actions";
56

67
const initialState = {
@@ -18,7 +19,7 @@ function SubmitButton() {
1819
}
1920

2021
export function AddForm() {
21-
const [state, formAction] = useFormState(createTodo, initialState);
22+
const [state, formAction] = useActionState(createTodo, initialState);
2223

2324
return (
2425
<form action={formAction}>

‎examples/next-forms/app/delete-form.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

3-
import { useFormState, useFormStatus } from "react-dom";
3+
import { useActionState } from "react";
4+
import { useFormStatus } from "react-dom";
45
import { deleteTodo } from "@/app/actions";
56

67
const initialState = {
@@ -18,7 +19,7 @@ function DeleteButton() {
1819
}
1920

2021
export function DeleteForm({ id, todo }: { id: number; todo: string }) {
21-
const [state, formAction] = useFormState(deleteTodo, initialState);
22+
const [state, formAction] = useActionState(deleteTodo, initialState);
2223

2324
return (
2425
<form action={formAction}>

‎examples/with-fauna/components/EntryForm.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
import cn from "classnames";
44
import { createEntryAction } from "@/actions/entry";
55
// @ts-ignore
6-
import { useFormState, useFormStatus } from "react-dom";
6+
import { useActionState } from "react";
7+
// @ts-ignore
8+
import { useFormStatus } from "react-dom";
79
import LoadingSpinner from "@/components/LoadingSpinner";
810
import SuccessMessage from "@/components/SuccessMessage";
911
import ErrorMessage from "@/components/ErrorMessage";
@@ -20,7 +22,7 @@ const initialState = {
2022
};
2123

2224
export default function EntryForm() {
23-
const [state, formAction] = useFormState(createEntryAction, initialState);
25+
const [state, formAction] = useActionState(createEntryAction, initialState);
2426
const { pending } = useFormStatus();
2527

2628
return (

‎package.json‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -196,18 +196,18 @@
196196
"pretty-bytes": "5.3.0",
197197
"pretty-ms": "7.0.0",
198198
"random-seed": "0.3.0",
199-
"react": "18.2.0",
199+
"react": "19.0.0-beta-4508873393-20240430",
200200
"react-17": "npm:[email protected]",
201-
"react-builtin": "npm:react@18.3.0-canary-c3048aab4-20240326",
202-
"react-dom": "18.2.0",
201+
"react-builtin": "npm:react@19.0.0-beta-4508873393-20240430",
202+
"react-dom": "19.0.0-beta-4508873393-20240430",
203203
"react-dom-17": "npm:[email protected]",
204-
"react-dom-builtin": "npm:react-dom@18.3.0-canary-c3048aab4-20240326",
205-
"react-dom-experimental-builtin": "npm:[email protected]c3048aab4-20240326",
206-
"react-experimental-builtin": "npm:[email protected]c3048aab4-20240326",
207-
"react-server-dom-turbopack": "18.3.0-canary-c3048aab4-20240326",
208-
"react-server-dom-turbopack-experimental": "npm:[email protected]c3048aab4-20240326",
209-
"react-server-dom-webpack": "18.3.0-canary-c3048aab4-20240326",
210-
"react-server-dom-webpack-experimental": "npm:[email protected]c3048aab4-20240326",
204+
"react-dom-builtin": "npm:react-dom@19.0.0-beta-4508873393-20240430",
205+
"react-dom-experimental-builtin": "npm:[email protected]4508873393-20240430",
206+
"react-experimental-builtin": "npm:[email protected]4508873393-20240430",
207+
"react-server-dom-turbopack": "19.0.0-beta-4508873393-20240430",
208+
"react-server-dom-turbopack-experimental": "npm:[email protected]4508873393-20240430",
209+
"react-server-dom-webpack": "19.0.0-beta-4508873393-20240430",
210+
"react-server-dom-webpack-experimental": "npm:[email protected]4508873393-20240430",
211211
"react-ssr-prepass": "1.0.8",
212212
"react-virtualized": "9.22.3",
213213
"relay-compiler": "13.0.2",
@@ -217,8 +217,8 @@
217217
"resolve-from": "5.0.0",
218218
"sass": "1.54.0",
219219
"satori": "0.10.9",
220-
"scheduler-builtin": "npm:scheduler@0.24.0-canary-c3048aab4-20240326",
221-
"scheduler-experimental-builtin": "npm:[email protected]c3048aab4-20240326",
220+
"scheduler-builtin": "npm:scheduler@0.25.0-beta-4508873393-20240430",
221+
"scheduler-experimental-builtin": "npm:[email protected]4508873393-20240430",
222222
"seedrandom": "3.0.5",
223223
"selenium-webdriver": "4.0.0-beta.4",
224224
"semver": "7.3.7",
@@ -252,7 +252,11 @@
252252
"@babel/types": "7.22.5",
253253
"@babel/traverse": "7.22.5",
254254
"@types/react": "18.2.74",
255-
"@types/react-dom": "18.2.23"
255+
"@types/react-dom": "18.2.23",
256+
"react": "19.0.0-beta-4508873393-20240430",
257+
"react-dom": "19.0.0-beta-4508873393-20240430",
258+
"react-is": "19.0.0-beta-4508873393-20240430",
259+
"scheduler": "0.25.0-beta-94eed63c49-20240425"
256260
},
257261
"engines": {
258262
"node": ">=18.17.0",

‎packages/next-swc/crates/next-core/src/next_import_map.rs‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -728,16 +728,21 @@ async fn rsc_aliases(
728728
}
729729
}
730730

731-
if runtime == NextRuntime::Edge {
732-
if ty.supports_react_server() {
733-
alias["react"] = format!("next/dist/compiled/react{react_channel}/react.react-server");
734-
alias["react-dom"] =
735-
format!("next/dist/compiled/react-dom{react_channel}/react-dom.react-server");
736-
} else {
737-
// x-ref: https://github.com/facebook/react/pull/25436
738-
alias["react-dom"] =
739-
format!("next/dist/compiled/react-dom{react_channel}/server-rendering-stub");
740-
}
731+
if runtime == NextRuntime::Edge && ty.supports_react_server() {
732+
alias.extend(indexmap! {
733+
"react" => format!("next/dist/compiled/react{react_channel}/react.react-server"),
734+
"next/dist/compiled/react" => format!("next/dist/compiled/react{react_channel}/react.react-server"),
735+
"next/dist/compiled/react-experimental" => format!("next/dist/compiled/react-experimental/react.react-server"),
736+
"react/jsx-runtime" => format!("next/dist/compiled/react{react_channel}/jsx-runtime.react-server"),
737+
"next/dist/compiled/react/jsx-runtime" => format!("next/dist/compiled/react{react_channel}/jsx-runtime.react-server"),
738+
"next/dist/compiled/react-experimental/jsx-runtime" => format!("next/dist/compiled/react-experimental/jsx-runtime.react-server"),
739+
"react/jsx-dev-runtime" => format!("next/dist/compiled/react{react_channel}/jsx-dev-runtime.react-server"),
740+
"next/dist/compiled/react/jsx-dev-runtime" => format!("next/dist/compiled/react{react_channel}/jsx-dev-runtime.react-server"),
741+
"next/dist/compiled/react-experimental/jsx-dev-runtime" => format!("next/dist/compiled/react-experimental/jsx-dev-runtime.react-server"),
742+
"react-dom" => format!("next/dist/compiled/react-dom{react_channel}/react-dom.react-server"),
743+
"next/dist/compiled/react-dom" => format!("next/dist/compiled/react-dom{react_channel}/react-dom.react-server"),
744+
"next/dist/compiled/react-dom-experimental" => format!("next/dist/compiled/react-dom-experimental/react-dom.react-server"),
745+
})
741746
}
742747

743748
insert_exact_alias_map(import_map, project_path, alias);

‎packages/next-swc/crates/next-custom-transforms/src/transforms/react_server_components.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -506,12 +506,12 @@ impl ReactServerComponentValidator {
506506
"useSyncExternalStore",
507507
"useTransition",
508508
"useOptimistic",
509+
"useActionState",
509510
],
510511
),
511512
(
512513
"react-dom",
513514
vec![
514-
"findDOMNode",
515515
"flushSync",
516516
"unstable_batchedUpdates",
517517
"useFormStatus",

‎packages/next-swc/crates/next-custom-transforms/tests/errors/react-server-components/server-graph/react-dom-api/input.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
1+
import { flushSync, unstable_batchedUpdates } from 'react-dom'
2+
3+
import { useActionState } from 'react'
24

35
import { useFormStatus, useFormState } from 'react-dom'
46

‎packages/next-swc/crates/next-custom-transforms/tests/errors/react-server-components/server-graph/react-dom-api/output.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom';
1+
import { flushSync, unstable_batchedUpdates } from 'react-dom';
2+
import { useActionState } from 'react'
23
import { useFormStatus, useFormState } from 'react-dom';
34
export default function() {
45
return null;

0 commit comments

Comments
 (0)