Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sync with react.dev @ 6274d4fa #57

Merged
merged 112 commits into from
Nov 11, 2024
Merged
Changes from 1 commit
Commits
Show all changes
112 commits
Select commit Hold shift + click to select a range
712556c
Fix inconsistent link underline on hover (#6731)
poteto Apr 2, 2024
93177e6
fix(rules-of-react): "everytime" -> "every time" (#6737)
SiarheiBobryk Apr 6, 2024
a7103d8
Add Ruslan to team page (#6738)
rickhanlonii Apr 8, 2024
11a7479
Fixes #6693: fixes search functionality on iOS devices (#6743)
ramizackaryshamir Apr 10, 2024
342fddb
Revert inappropriate capitalization of "Transition" (#6746)
smikitky Apr 10, 2024
db2dc7f
Add docs for onCaughtError and onUncaughtError (#6742)
rickhanlonii Apr 11, 2024
2749eb4
Update link to nearestnabors.com (#6754)
jackpope Apr 15, 2024
56ca8f1
[easy] remove unused ref in ExpandableCallout.tsx (#6755)
kassens Apr 15, 2024
c2180a3
fix issue #6734 (#6735)
wheeler6123 Apr 17, 2024
37a8d64
Update SocialBanner.tsx (#6763)
kassens Apr 19, 2024
07cbd00
API docs for useDeferredValue's initialValue (#6747)
acdlite Apr 22, 2024
f8afd94
Add /link/new-jsx-transform (#6772)
rickhanlonii Apr 24, 2024
cdd2fdd
Add documentation for ref cleanup functions (#6770)
jackpope Apr 24, 2024
9fb2f0d
Move `use` to APIs (#6774)
kassens Apr 24, 2024
4f55010
Rename useFormState to useActionState (#6776)
kassens Apr 25, 2024
191852a
Add blog posts for React 19 Beta (#6778)
rickhanlonii Apr 25, 2024
412b733
Blog post nits (#6779)
rickhanlonii Apr 25, 2024
c8a316a
Blog typo
rickhanlonii Apr 25, 2024
0078b50
React19 blog post typos (#6780)
Zeko369 Apr 25, 2024
317dcf3
Fix code example in React-19 `useOptimistic` section (#6781)
gnoff Apr 25, 2024
9afcbf6
[React19-blog]: Make use(context) example easier to understand (#6783)
Zeko369 Apr 25, 2024
9aa8e82
refines the messaging to clarify that Server Components the feature i…
gnoff Apr 25, 2024
cdd0964
Fix react-helmet link (#6786)
gnoff Apr 25, 2024
526d7b4
Clarify React DOM APIs in React 19 Post (#6785)
rickhanlonii Apr 25, 2024
64beb65
Resources -> resources (#6787)
gnoff Apr 25, 2024
8cbed3e
Fix typos (#6788)
dom-zhu Apr 25, 2024
e09ff1c
Better use(Context) example in 19 blog (#6789)
rickhanlonii Apr 26, 2024
e45ac55
Better use(Promise) example in 19 blog (#6790)
rickhanlonii Apr 26, 2024
057f35c
Replaced all instances of /react to /rsc (#6797)
srikanth-kandi Apr 26, 2024
f664028
Updated react-19.md (#6796)
cbmongithub Apr 26, 2024
cf53cb5
Add rss feed (#6803)
rickhanlonii Apr 26, 2024
bc1020a
Update me
poteto Apr 26, 2024
845a281
Add redirects for moved rsc pages (#6800)
eps1lon Apr 26, 2024
807001c
chore: fix typo (#6791)
ChiaJune Apr 26, 2024
537bd05
to make examples consistent. (#6793)
Shubhdeep12 Apr 26, 2024
8c1c6e3
Add meta task for rss auto-discovery (#6805)
rickhanlonii Apr 26, 2024
01edd5c
Upgrade guide should recommend installing types `@beta` (#6806)
eps1lon Apr 26, 2024
9c53b48
Remove useless async (#6809)
Brooooooklyn Apr 29, 2024
3981ffe
Add versions page and nav version (#6814)
rickhanlonii Apr 30, 2024
86d306f
rm new redirects (#6816)
rickhanlonii Apr 30, 2024
6d0aca1
Fix punctuation. (#6815)
toocomputer Apr 30, 2024
e538800
Update react-19.md (#6813)
harish-sethuraman Apr 30, 2024
1df378f
uwu (#6817)
rickhanlonii Apr 30, 2024
3dd67d1
Fix type issues with `useActionState` docs (#6798)
eps1lon Apr 30, 2024
6f5ee38
uwu - add alt and instructions for turning off
rickhanlonii Apr 30, 2024
74697fb
fix uwu flicker (#6820)
rickhanlonii Apr 30, 2024
7062b8d
Update server-components.md - typo (#6823)
mootookoi May 1, 2024
bdb0d26
add uww toggle (#6824)
rickhanlonii May 1, 2024
0dbd67a
Add React Rally 2024 to conferences (#6819)
mzabriskie May 1, 2024
9e1f5cd
Add "Languages" navigation and article (#6382)
smikitky May 1, 2024
a2f8ff3
fix brand colors (#6826)
rickhanlonii May 1, 2024
a6450b9
Update uwu logo (#6827)
poteto May 2, 2024
e69ec58
rm survey and fix old links (#6828)
rickhanlonii May 2, 2024
d4a9a76
Fix typo in server-components.md (#6829)
seanWLawrence May 3, 2024
0e1ff1a
Fix React 19 upgrade guide typo (#6830)
Ryczko May 3, 2024
556063b
Add a redirect entry for feed.xml => rss.xml (#6836)
flexdinesh May 5, 2024
1fa2057
Update react-19.md (#6838)
HomyeeKing May 6, 2024
46437c2
Add missing period to React v18.0 blog post (#6842)
jackspiva May 7, 2024
0b9ae66
Add docs for useRef no no (#6846)
rickhanlonii May 9, 2024
f1b0f86
Fix typo on tutorial-tic-tac-toe.md (#6843)
skoryky May 10, 2024
f9b9b66
Fix #6852: navigation link fix (#6853)
Rekl0w May 10, 2024
4f1d985
Update synchronizing-with-effects.md (#6856)
segmentationfaulter May 10, 2024
b7bf6c1
Fix Node.js version update at `package.json` (#6855)
Rekl0w May 10, 2024
a81e415
Change React dependency version in <form> page fix (#6858)
includerajat May 13, 2024
f053b53
Update team.md: Jason Bonta (#6862)
jbonta May 14, 2024
e0c667f
Add React Compiler Docs (#6869)
rickhanlonii May 15, 2024
fa19b7f
compiler playground link
jbonta May 15, 2024
8d69e6e
Clearer rule severity for React Compiler eslint plugin (#6870)
spanishpear May 16, 2024
4e3d63a
Fix typos in React Compiler guide (#6875)
denniskigen May 17, 2024
3a46a6e
Update instructions for setting up the React Compiler in Next.js (#6877)
timneutkens May 17, 2024
70a7b64
Update export of next.config.js (#6878)
timneutkens May 17, 2024
ee068ac
Update separating-events-from-effects.md (#6880)
officialkidmax May 19, 2024
8bb3eb3
Fix typo (spreadsheet => stylesheet) (#6750)
smikitky May 19, 2024
e7c52aa
add frontend nation conference (#6866)
danielkellyio May 19, 2024
9967ded
Fix the order of the returns of useActionState (#6864)
yousefelgoharyx May 19, 2024
0dc72f6
Rm dupe blog description (#6885)
rickhanlonii May 20, 2024
05c9d77
typo: spell check (#6892)
TheRakeshPurohit May 21, 2024
bc43b95
End ReactConf banner (#6893)
rickhanlonii May 21, 2024
beefa06
docs: format src/content/blog/2024/04/25/react-19.md (#6883)
kiner-tang May 21, 2024
80d30d7
navitem-css-change (#6888)
ohe1013 May 21, 2024
adb3bed
Update react-compiler docs (#6898)
poteto May 21, 2024
4eb0850
fixed typo in synchronizing-with-effects.md (#6899)
emmanueposu May 22, 2024
59a2739
Add React Conf 2024 Recap post (#6886)
rickhanlonii May 22, 2024
f055f8f
Fix recap blog video links (#6902)
rickhanlonii May 22, 2024
bb96306
Add codemods to upgrade guide (#6897)
rickhanlonii May 23, 2024
68c0f85
s/beta/rc (#6906)
rickhanlonii May 23, 2024
a25bd4b
Clarify precedence is arbitrary valued (#6908)
gnoff May 23, 2024
69b95a6
Add /warnings/version-mismatch (#6909)
rickhanlonii May 24, 2024
ef23197
Clarify useEffect caveats (#6910)
rickhanlonii May 24, 2024
c3bc5af
FIX: Typo in useEffect.md caveats (#6911)
rachitiitr May 25, 2024
12fca4c
Add act documentation (#6901)
jackpope May 28, 2024
ad1a5c2
docs: update links @testing-library/react-native (#6916)
germanolira May 29, 2024
b12743c
Add more codemods (#6921)
rickhanlonii May 29, 2024
438ee7a
Update to CodePen URL (#6452)
chriscoyier Jun 11, 2024
c116c42
Remove mention of Suspensey `<script />` (#6945)
eps1lon Jun 12, 2024
04b5d44
Small typo - Update cache.md (#6935)
kasperaamodt Jun 12, 2024
73a8d9c
Update preinit.md 📜 (#6938)
sanjaiyan-dev Jun 12, 2024
c36bd39
docs(api-act): api act parts word error (#6939)
yaolifeng0629 Jun 12, 2024
f1bdfa2
Recommend installing exact RC (#6944)
eps1lon Jun 12, 2024
56df8af
rearrange conferences (#6952)
harish-sethuraman Jun 14, 2024
3997808
Update react-compiler.md (#6965)
dusanmarsa Jun 18, 2024
169d5c1
Add branding context menu (#6986)
rickhanlonii Jun 20, 2024
dc08860
Add React Brussels 2024 and React Africa 2024 (#6990)
AymenBenAmor Jun 24, 2024
4eacc73
Remove uwuQueryParam console.log (#6993)
mattcarrollcode Jun 24, 2024
e9d2c63
Update compiler docs for Expo apps (#7000)
poteto Jun 28, 2024
53fbed3
Add Chennai React meetup (#7004)
Nikhil-Kumaran Jun 30, 2024
1a3a3ef
fix: Correct reference to sandboxed file App.js in challenge (#7010)
ichistmeinname Jul 4, 2024
2a2e02f
Update compiler docs for Rspack and Rsbuild apps (#7031)
chenjiahan Jul 5, 2024
4c91abc
Update /link/legacy-context to removal blog post (#7047)
kassens Jul 10, 2024
de726d2
Update verb usage in sentence (#7070)
ryanjbonnell Jul 20, 2024
6274d4f
docs: Add RenderCon Kenya 2024 conference (#6914)
orama254 Jul 20, 2024
0110dbd
Merge branch 'main' of https://github.com/reactjs/react.dev into sync…
react-translations-bot Aug 5, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Rename useFormState to useActionState (#6776)
* move useFormState api

* add redirect

* use React DOM as the name
kassens authored Apr 25, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 4f5501088ef55dbab633fab6b8ace09edfd9cc6d
Original file line number Diff line number Diff line change
@@ -52,7 +52,7 @@ We refer to this broader collection of features as simply "Actions". Actions all
</form>
```

The `action` function can operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the [`'use server'`](/reference/react/use-server) directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), and [`useFormState`](/reference/react-dom/hooks/useFormState) to access the current state and response of the form action.
The `action` function can operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the [`'use server'`](/reference/react/use-server) directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), and [`useActionState`](/reference/react/useActionState) to access the current state and response of the form action.

By default, Actions are submitted within a [transition](/reference/react/useTransition), keeping the current page interactive while the action is processing. Since Actions support async functions, we've also added the ability to use `async/await` in transitions. This allows you to show pending UI with the `isPending` state of a transition when an async request like `fetch` starts, and show the pending UI all the way through the update being applied.

@@ -78,7 +78,7 @@ React Server Components, Asset Loading, Document Metadata, and Actions have all

- **Asset Loading**: we integrated Suspense with the loading lifecycle of resources such as stylesheets, fonts, and scripts so that React takes them into account to determine whether the content in elements like [`<style>`](/reference/react-dom/components/style), [`<link>`](/reference/react-dom/components/link), and [`<script>`](/reference/react-dom/components/script) are ready to be displayed. We’ve also added new [Resource Loading APIs](/reference/react-dom#resource-preloading-apis) like `preload` and `preinit` to provide greater control for when a resource should load and initialize.

- **Actions**: As shared above, we've added Actions to manage sending data from the client to the server. You can add `action` to elements like [`<form/>`](/reference/react-dom/components/form), access the status with [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), handle the result with [`useFormState`](/reference/react-dom/hooks/useFormState), and optimistically update the UI with [`useOptimistic`](/reference/react/useOptimistic).
- **Actions**: As shared above, we've added Actions to manage sending data from the client to the server. You can add `action` to elements like [`<form/>`](/reference/react-dom/components/form), access the status with [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), handle the result with [`useActionState`](/reference/react/useActionState), and optimistically update the UI with [`useOptimistic`](/reference/react/useOptimistic).

Since all of these features work together, it’s difficult to release them in the Stable channel individually. Releasing Actions without the complementary hooks for accessing form states would limit the practical usability of Actions. Introducing React Server Components without integrating Server Actions would complicate modifying data on the server.

12 changes: 6 additions & 6 deletions src/content/reference/react-dom/components/form.md
Original file line number Diff line number Diff line change
@@ -324,14 +324,14 @@ Displaying a form submission error message before the JavaScript bundle loads fo

1. `<form>` be rendered by a [Server Component](/reference/react/use-client)
1. the function passed to the `<form>`'s `action` prop be a [Server Action](/reference/react/use-server)
1. the `useFormState` Hook be used to display the error message
1. the `useActionState` Hook be used to display the error message

`useFormState` takes two parameters: a [Server Action](/reference/react/use-server) and an initial state. `useFormState` returns two values, a state variable and an action. The action returned by `useFormState` should be passed to the `action` prop of the form. The state variable returned by `useFormState` can be used to displayed an error message. The value returned by the [Server Action](/reference/react/use-server) passed to `useFormState` will be used to update the state variable.
`useActionState` takes two parameters: a [Server Action](/reference/react/use-server) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to displayed an error message. The value returned by the [Server Action](/reference/react/use-server) passed to `useActionState` will be used to update the state variable.

<Sandpack>

```js src/App.js
import { useFormState } from "react-dom";
import { useActionState } from "react";
import { signUpNewUser } from "./api";

export default function Page() {
@@ -345,12 +345,12 @@ export default function Page() {
return err.toString();
}
}
const [message, formAction] = useFormState(signup, null);
const [message, signupAction] = useActionState(signup, null);
return (
<>
<h1>Signup for my newsletter</h1>
<p>Signup with the same email twice to see an error</p>
<form action={formAction} id="signup-form">
<form action={signupAction} id="signup-form">
<label htmlFor="email">Email: </label>
<input name="email" id="email" placeholder="react@example.com" />
<button>Sign up</button>
@@ -386,7 +386,7 @@ export async function signUpNewUser(newEmail) {

</Sandpack>

Learn more about updating state from a form action with the [`useFormState`](/reference/react-dom/hooks/useFormState) docs
Learn more about updating state from a form action with the [`useActionState`](/reference/react/hooks/useActionState) docs

### Handling multiple submission types {/*handling-multiple-submission-types*/}

4 changes: 1 addition & 3 deletions src/content/reference/react-dom/hooks/index.md
Original file line number Diff line number Diff line change
@@ -21,14 +21,13 @@ Form Hooks are currently only available in React's canary and experimental chann
*Forms* let you create interactive controls for submitting information. To manage forms in your components, use one of these Hooks:

* [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) allows you to make updates to the UI based on the status of the a form.
* [`useFormState`](/reference/react-dom/hooks/useFormState) allows you to manage state inside a form.

```js
function Form({ action }) {
async function increment(n) {
return n + 1;
}
const [count, incrementFormAction] = useFormState(increment, 0);
const [count, incrementFormAction] = useActionState(increment, 0);
return (
<form action={action}>
<button formAction={incrementFormAction}>Count: {count}</button>
@@ -46,4 +45,3 @@ function Button() {
);
}
```

1 change: 1 addition & 0 deletions src/content/reference/react/hooks.md
Original file line number Diff line number Diff line change
@@ -113,6 +113,7 @@ These Hooks are mostly useful to library authors and aren't commonly used in the
- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
* [`useActionState`](/reference/react/useActionState) allows you to manage state of actions.

---

8 changes: 4 additions & 4 deletions src/content/reference/react/use-server.md
Original file line number Diff line number Diff line change
@@ -133,7 +133,7 @@ By passing a Server Action to the form `action`, React can [progressively enhanc

In the username request form, there might be the chance that a username is not available. `requestUsername` should tell us if it fails or not.

To update the UI based on the result of a Server Action while supporting progressive enhancement, use [`useFormState`](/reference/react-dom/hooks/useFormState).
To update the UI based on the result of a Server Action while supporting progressive enhancement, use [`useActionState`](/reference/react/useActionState).

```js
// requestUsername.js
@@ -153,11 +153,11 @@ export default async function requestUsername(formData) {
// UsernameForm.js
'use client';

import { useFormState } from 'react-dom';
import { useActionState } from 'react';
import requestUsername from './requestUsername';

function UsernameForm() {
const [returnValue, action] = useFormState(requestUsername, 'n/a');
const [returnValue, action] = useActionState(requestUsername, 'n/a');

return (
<>
@@ -171,7 +171,7 @@ function UsernameForm() {
}
```

Note that like most Hooks, `useFormState` can only be called in <CodeStep step={1}>[client code](/reference/react/use-client)</CodeStep>.
Note that like most Hooks, `useActionState` can only be called in <CodeStep step={1}>[client code](/reference/react/use-client)</CodeStep>.

### Calling a Server Action outside of `<form>` {/*calling-a-server-action-outside-of-form*/}

Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
---
title: useFormState
title: useActionState
canary: true
---

<Canary>

The `useFormState` Hook is currently only available in React's Canary and experimental channels. Learn more about [release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports [React Server Components](/reference/react/use-client) to get the full benefit of `useFormState`.
The `useActionState` Hook is currently only available in React's Canary and experimental channels. Learn more about [release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports [React Server Components](/reference/react/use-client) to get the full benefit of `useActionState`.

</Canary>

<Note>

In earlier React Canary versions, this API was part of React DOM and called `useFormState`.

</Note>

<Intro>

`useFormState` is a Hook that allows you to update state based on the result of a form action.
`useActionState` is a Hook that allows you to update state based on the result of a form action.

```js
const [state, formAction] = useFormState(fn, initialState, permalink?);
const [state, formAction] = useActionState(fn, initialState, permalink?);
```

</Intro>
@@ -25,21 +31,21 @@ const [state, formAction] = useFormState(fn, initialState, permalink?);

## Reference {/*reference*/}

### `useFormState(action, initialState, permalink?)` {/*useformstate*/}
### `useActionState(action, initialState, permalink?)` {/*useactionstate*/}

{/* TODO T164397693: link to actions documentation once it exists */}

Call `useFormState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useFormState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state. The latest form state is also passed to the function that you provided.
Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state. The latest form state is also passed to the function that you provided.

```js
import { useFormState } from "react-dom";
import { useActionState } from "react";

async function increment(previousState, formData) {
return previousState + 1;
}

function StatefulForm({}) {
const [state, formAction] = useFormState(increment, 0);
const [state, formAction] = useActionState(increment, 0);
return (
<form>
{state}
@@ -51,7 +57,7 @@ function StatefulForm({}) {

The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.

If used with a Server Action, `useFormState` allows the server's response from submitting the form to be shown even before hydration has completed.
If used with a Server Action, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed.

[See more examples below.](#usage)

@@ -65,30 +71,30 @@ If used with a Server Action, `useFormState` allows the server's response from s

#### Returns {/*returns*/}

`useFormState` returns an array with exactly two values:
`useActionState` returns an array with exactly two values:

1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action.
2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form.

#### Caveats {/*caveats*/}

* When used with a framework that supports React Server Components, `useFormState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, it is equivalent to component local state.
* The function passed to `useFormState` receives an extra argument, the previous or initial state, as its first argument. This makes its signature different than if it were used directly as a form action without using `useFormState`.
* When used with a framework that supports React Server Components, `useActionState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, it is equivalent to component local state.
* The function passed to `useActionState` receives an extra argument, the previous or initial state, as its first argument. This makes its signature different than if it were used directly as a form action without using `useActionState`.

---

## Usage {/*usage*/}

### Using information returned by a form action {/*using-information-returned-by-a-form-action*/}

Call `useFormState` at the top level of your component to access the return value of an action from the last time a form was submitted.
Call `useActionState` at the top level of your component to access the return value of an action from the last time a form was submitted.

```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
import { useFormState } from 'react-dom';
import { useActionState } from 'react';
import { action } from './actions.js';

function MyComponent() {
const [state, formAction] = useFormState(action, null);
const [state, formAction] = useActionState(action, null);
// ...
return (
<form action={formAction}>
@@ -98,14 +104,14 @@ function MyComponent() {
}
```

`useFormState` returns an array with exactly two items:
`useActionState` returns an array with exactly two items:

1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop.

When the form is submitted, the <CodeStep step={3}>action</CodeStep> function that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.

The <CodeStep step={3}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={4}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useFormState` had not been used.
The <CodeStep step={3}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={4}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useActionState` had not been used.

```js [[3, 1, "action"], [1, 1, "currentState"]]
function action(currentState, formData) {
@@ -118,17 +124,16 @@ function action(currentState, formData) {

#### Display form errors {/*display-form-errors*/}

To display messages such as an error message or toast that's returned by a Server Action, wrap the action in a call to `useFormState`.
To display messages such as an error message or toast that's returned by a Server Action, wrap the action in a call to `useActionState`.

<Sandpack>

```js src/App.js
import { useState } from "react";
import { useFormState } from "react-dom";
import { useActionState, useState } from "react";
import { addToCart } from "./actions.js";

function AddToCartForm({itemID, itemTitle}) {
const [message, formAction] = useFormState(addToCart, null);
const [message, formAction] = useActionState(addToCart, null);
return (
<form action={formAction}>
<h2>{itemTitle}</h2>
@@ -196,12 +201,11 @@ The return value from a Server Action can be any serializable value. For example
<Sandpack>

```js src/App.js
import { useState } from "react";
import { useFormState } from "react-dom";
import { useActionState, useState } from "react";
import { addToCart } from "./actions.js";

function AddToCartForm({itemID, itemTitle}) {
const [formState, formAction] = useFormState(addToCart, {});
const [formState, formAction] = useActionState(addToCart, {});
return (
<form action={formAction}>
<h2>{itemTitle}</h2>
@@ -283,7 +287,7 @@ form button {

### My action can no longer read the submitted form data {/*my-action-can-no-longer-read-the-submitted-form-data*/}

When you wrap an action with `useFormState`, it gets an extra argument *as its first argument*. The submitted form data is therefore its *second* argument instead of its first as it would usually be. The new first argument that gets added is the current state of the form.
When you wrap an action with `useActionState`, it gets an extra argument *as its first argument*. The submitted form data is therefore its *second* argument instead of its first as it would usually be. The new first argument that gets added is the current state of the form.

```js
function action(currentState, formData) {
10 changes: 5 additions & 5 deletions src/sidebarReference.json
Original file line number Diff line number Diff line change
@@ -14,6 +14,11 @@
"title": "Hooks",
"path": "/reference/react/hooks",
"routes": [
{
"title": "useActionState",
"path": "/reference/react/useActionState",
"canary": true
},
{
"title": "useCallback",
"path": "/reference/react/useCallback"
@@ -174,11 +179,6 @@
"title": "Hooks",
"path": "/reference/react-dom/hooks",
"routes": [
{
"title": "useFormState",
"path": "/reference/react-dom/hooks/useFormState",
"canary": true
},
{
"title": "useFormStatus",
"path": "/reference/react-dom/hooks/useFormStatus",
5 changes: 5 additions & 0 deletions vercel.json
Original file line number Diff line number Diff line change
@@ -9,6 +9,11 @@
"destination": "/reference/react",
"permanent": true
},
{
"source": "/reference/react-dom/hooks/useFormState",
"destination": "/reference/react/useActionState",
"permanent": true
},
{
"source": "/learn/meet-the-team",
"destination": "/community/team",