Skip to content

Commit 0a80017

Browse files
gnoffztannerkodiakhq[bot]huozhi
authored
Update React from d900fadbf to 09fbee89d. Removes server context and experimental prefix for server action APIs (#56809)
The latest React canary builds have a few changes that need to be adopted for compatability. 1. the `useFormState` and `useFormStatus` hooks in `react-dom` and the `formData` opiont in `react-dom/server` are no longer prefixed with `experimental_` 2. server content (an undocumented React feature) has been removed. Next only had trivial intenral use of this API and did not expose a coherent feature to Next users (no ability to seed context on refetches). It is still possible that some users used the React server context APIs which is why this should go into Next 14. ### React upstream changes - facebook/react#27513 - facebook/react#27514 - facebook/react#27511 - facebook/react#27508 - facebook/react#27502 - facebook/react#27474 - facebook/react#26789 - facebook/react#27500 - facebook/react#27488 - facebook/react#27458 - facebook/react#27471 - facebook/react#27470 - facebook/react#27464 - facebook/react#27456 - facebook/react#27462 - facebook/react#27461 - facebook/react#27460 - facebook/react#27459 - facebook/react#27454 - facebook/react#27457 - facebook/react#27453 - facebook/react#27401 - facebook/react#27443 - facebook/react#27445 - facebook/react#27364 - facebook/react#27440 - facebook/react#27436 --------- Co-authored-by: Zack Tanner <zacktanner@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Jiachi Liu <inbox@huozhi.im>
1 parent 26d0bf2 commit 0a80017

File tree

134 files changed

+12013
-7403
lines changed

Some content is hidden

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

134 files changed

+12013
-7403
lines changed

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

+4-6
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,7 @@ For example, the following submit button:
377377
```tsx filename="app/submit-button.tsx" switcher
378378
'use client'
379379

380-
import { experimental_useFormStatus as useFormStatus } from 'react-dom'
380+
import { useFormStatus } from 'react-dom'
381381

382382
export function SubmitButton() {
383383
const { pending } = useFormStatus()
@@ -393,7 +393,7 @@ export function SubmitButton() {
393393
```jsx filename="app/submit-button.jsx" switcher
394394
'use client'
395395

396-
import { experimental_useFormStatus as useFormStatus } from 'react-dom'
396+
import { useFormStatus } from 'react-dom'
397397

398398
export function SubmitButton() {
399399
const { pending } = useFormStatus()
@@ -557,8 +557,7 @@ Then, from a Client Component, you can read this value and display an error mess
557557
```tsx filename="app/add-form.tsx" switcher
558558
'use client'
559559

560-
import { experimental_useFormState as useFormState } from 'react-dom'
561-
import { experimental_useFormStatus as useFormStatus } from 'react-dom'
560+
import { useFormState, useFormStatus } from 'react-dom'
562561
import { createTodo } from '@/app/actions'
563562

564563
const initialState = {
@@ -594,8 +593,7 @@ export function AddForm() {
594593
```jsx filename="app/add-form.jsx" switcher
595594
'use client'
596595

597-
import { experimental_useFormState as useFormState } from 'react-dom'
598-
import { experimental_useFormStatus as useFormStatus } from 'react-dom'
596+
import { useFormState, useFormStatus } from 'react-dom'
599597
import { createTodo } from '@/app/actions'
600598

601599
const initialState = {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { experimental_useFormState as useFormState } from 'react-dom'
4-
import { experimental_useFormStatus as useFormStatus } from 'react-dom'
4+
import { useFormStatus } from 'react-dom'
55
import { createTodo } from '@/app/actions'
66

77
const initialState = {

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use client'
22

3-
import { experimental_useFormState as useFormState } from 'react-dom'
4-
import { experimental_useFormStatus as useFormStatus } from 'react-dom'
3+
import { useFormState, useFormStatus } from 'react-dom'
54
import { deleteTodo } from '@/app/actions'
65

76
const initialState = {

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

+2-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
import cn from 'classnames'
44
import { createEntryAction } from '@/actions/entry'
55
// @ts-ignore
6-
import { experimental_useFormState as useFormState } from 'react-dom'
7-
import { experimental_useFormStatus as useFormStatus } from 'react-dom'
6+
import { useFormState, useFormStatus } from 'react-dom'
87
import LoadingSpinner from '@/components/LoadingSpinner'
98
import SuccessMessage from '@/components/SuccessMessage'
109
import ErrorMessage from '@/components/ErrorMessage'
@@ -26,7 +25,7 @@ export default function EntryForm() {
2625

2726
return (
2827
<>
29-
<form className="flex relative my-4" action={formAction}>
28+
<form className="relative flex my-4" action={formAction}>
3029
<input
3130
required
3231
className={cn(inputClasses, 'w-1/3 mr-2 px-4')}

‎package.json

+14-14
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@
100100
"@types/jest": "27.4.1",
101101
"@types/node": "20.2.5",
102102
"@types/node-fetch": "2.6.1",
103-
"@types/react": "18.2.8",
104-
"@types/react-dom": "18.2.4",
103+
"@types/react": "18.2.28",
104+
"@types/react-dom": "18.2.13",
105105
"@types/relay-runtime": "14.1.13",
106106
"@types/selenium-webdriver": "4.0.15",
107107
"@types/sharp": "0.29.3",
@@ -193,16 +193,16 @@
193193
"random-seed": "0.3.0",
194194
"react": "18.2.0",
195195
"react-17": "npm:react@17.0.2",
196-
"react-builtin": "npm:react@18.3.0-canary-d900fadbf-20230929",
196+
"react-builtin": "npm:react@18.3.0-canary-09fbee89d-20231013",
197197
"react-dom": "18.2.0",
198198
"react-dom-17": "npm:react-dom@17.0.2",
199-
"react-dom-builtin": "npm:react-dom@18.3.0-canary-d900fadbf-20230929",
200-
"react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-d900fadbf-20230929",
201-
"react-experimental-builtin": "npm:react@0.0.0-experimental-d900fadbf-20230929",
202-
"react-server-dom-turbopack": "18.3.0-canary-d900fadbf-20230929",
203-
"react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-d900fadbf-20230929",
204-
"react-server-dom-webpack": "18.3.0-canary-d900fadbf-20230929",
205-
"react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-d900fadbf-20230929",
199+
"react-dom-builtin": "npm:react-dom@18.3.0-canary-09fbee89d-20231013",
200+
"react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-09fbee89d-20231013",
201+
"react-experimental-builtin": "npm:react@0.0.0-experimental-09fbee89d-20231013",
202+
"react-server-dom-turbopack": "18.3.0-canary-09fbee89d-20231013",
203+
"react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-09fbee89d-20231013",
204+
"react-server-dom-webpack": "18.3.0-canary-09fbee89d-20231013",
205+
"react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-09fbee89d-20231013",
206206
"react-ssr-prepass": "1.0.8",
207207
"react-virtualized": "9.22.3",
208208
"relay-compiler": "13.0.2",
@@ -212,8 +212,8 @@
212212
"resolve-from": "5.0.0",
213213
"sass": "1.54.0",
214214
"satori": "0.10.6",
215-
"scheduler-builtin": "npm:scheduler@0.24.0-canary-d900fadbf-20230929",
216-
"scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-d900fadbf-20230929",
215+
"scheduler-builtin": "npm:scheduler@0.24.0-canary-09fbee89d-20231013",
216+
"scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-09fbee89d-20231013",
217217
"seedrandom": "3.0.5",
218218
"selenium-webdriver": "4.0.0-beta.4",
219219
"semver": "7.3.7",
@@ -245,8 +245,8 @@
245245
"@babel/parser": "7.18.0",
246246
"@babel/types": "7.18.0",
247247
"@babel/traverse": "7.18.0",
248-
"@types/react": "18.2.7",
249-
"@types/react-dom": "18.2.4"
248+
"@types/react": "18.2.28",
249+
"@types/react-dom": "18.2.13"
250250
},
251251
"engines": {
252252
"node": ">=18.18.2",

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -612,8 +612,8 @@ pub fn server_components<C: Comments>(
612612
JsWord::from("findDOMNode"),
613613
JsWord::from("flushSync"),
614614
JsWord::from("unstable_batchedUpdates"),
615-
JsWord::from("experimental_useFormStatus"),
616-
JsWord::from("experimental_useFormState"),
615+
JsWord::from("useFormStatus"),
616+
JsWord::from("useFormState"),
617617
],
618618
invalid_server_react_apis: vec![
619619
JsWord::from("Component"),

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
22

3-
import {
4-
experimental_useFormStatus,
5-
experimental_useFormState,
6-
} from 'react-dom'
3+
import { useFormStatus, useFormState } from 'react-dom'
74

85
export default function () {
96
return null

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom';
2-
import { experimental_useFormStatus, experimental_useFormState } from 'react-dom';
2+
import { useFormStatus, useFormState } from 'react-dom';
33
export default function() {
44
return null;
55
}

‎packages/next-swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/output.stderr

+6-6
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@
1717
: ^^^^^^^^^^^^^^^^^^^^^^^
1818
`----
1919

20-
x NEXT_RSC_ERR_REACT_API: experimental_useFormStatus
20+
x NEXT_RSC_ERR_REACT_API: useFormStatus
2121
,-[input.js:3:1]
2222
3 | import {
23-
4 | experimental_useFormStatus,
23+
4 | useFormStatus,
2424
: ^^^^^^^^^^^^^^^^^^^^^^^^^^
25-
5 | experimental_useFormState,
25+
5 | useFormState,
2626
`----
2727

28-
x NEXT_RSC_ERR_REACT_API: experimental_useFormState
28+
x NEXT_RSC_ERR_REACT_API: useFormState
2929
,-[input.js:4:1]
30-
4 | experimental_useFormStatus,
31-
5 | experimental_useFormState,
30+
4 | useFormStatus,
31+
5 | useFormState,
3232
: ^^^^^^^^^^^^^^^^^^^^^^^^^
3333
6 | } from 'react-dom'
3434
`----

‎packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-api/input.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
22

3-
import {
4-
experimental_useFormStatus,
5-
experimental_useFormState,
6-
} from 'react-dom'
3+
import { useFormStatus, useFormState } from 'react-dom'
74

85
export default function () {
96
return null

‎packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-api/output.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom';
2-
import { experimental_useFormStatus, experimental_useFormState } from 'react-dom';
2+
import { useFormStatus, useFormState } from 'react-dom';
33

44
export default function() {
55
return null;

‎packages/next/src/client/app-index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ export function hydrate() {
299299
React.startTransition(() =>
300300
(ReactDOMClient as any).hydrateRoot(appElement, reactEl, {
301301
...options,
302-
experimental_formState: initialFormStateData,
302+
formState: initialFormStateData,
303303
})
304304
)
305305
}

0 commit comments

Comments
 (0)