Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions src/content/learn/rsc-sandbox-test.md
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ export default function UserCard({ userPromise, serverTime }) {

## Flight Data Types in Server Actions {/*flight-data-types-actions*/}

This demo sends Map, Set, Date, and BigInt from a client component *to* a server action via `encodeReply`/`decodeReply`, then verifies the types survived the round trip.
This demo sends Map, Set, Date, and BigInt from a client component *to* a Server Action via `encodeReply`/`decodeReply`, then verifies the types survived the round trip.

<SandpackRSC>

Expand Down Expand Up @@ -390,7 +390,7 @@ export default function TestButton({ testTypes }) {

## Server Action Mutation + Re-render {/*action-mutation-rerender*/}

The server action mutates server-side data and returns a confirmation string. The updated list is only visible because the framework automatically re-renders the entire server component tree after the action completes — the server component re-reads the data and streams the new UI to the client.
The Server Action mutates server-side data and returns a confirmation string. The updated list is only visible because the framework automatically re-renders the entire server component tree after the Action completes — the server component re-reads the data and streams the new UI to the client.

<SandpackRSC>

Expand Down Expand Up @@ -487,7 +487,7 @@ export default function AddTodo({ createTodo }) {

## Inline Server Actions {/*inline-server-actions*/}

Server actions defined inline inside a server component with `'use server'` on the function body. The action closes over module-level state and is passed as a prop — no separate `actions.js` file needed.
Server Actions defined inline inside a server component with `'use server'` on the function body. The Action closes over module-level state and is passed as a prop — no separate `actions.js` file needed.

<SandpackRSC>

Expand Down
14 changes: 7 additions & 7 deletions src/content/reference/react-dom/components/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ Reading form data with `onSubmit` works in every version of React and gives you

</Note>

### Handle form submission with an action prop {/*handle-form-submission-with-an-action-prop*/}
### Handle form submission with an Action prop {/*handle-form-submission-with-an-action-prop*/}

Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. Unlike `onSubmit`, an `action` runs in a [Transition](/reference/react/useTransition) and calling `e.preventDefault()` isn't needed. After the `action` function succeeds, all uncontrolled field elements in the form are reset.

Expand Down Expand Up @@ -115,7 +115,7 @@ Render a `<form>` with an input and submit button. Pass a Server Function (a fun

Passing a Server Function to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.

You can use hidden form fields to provide data to the `<form>`'s action. The Server Function will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
You can use hidden form fields to provide data to the `<form>`'s Action. The Server Function will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).

```jsx
import { updateCart } from './lib.js';
Expand All @@ -136,7 +136,7 @@ function AddToCart({productId}) {
}
```

In lieu of using hidden form fields to provide data to the `<form>`'s action, you can call the <CodeStep step={1}>`bind`</CodeStep> method to supply it with extra arguments. This will bind a new argument (<CodeStep step={2}>`productId`</CodeStep>) to the function in addition to the <CodeStep step={3}>`formData`</CodeStep> that is passed as an argument to the function.
In lieu of using hidden form fields to provide data to the `<form>`'s Action, you can call the <CodeStep step={1}>`bind`</CodeStep> method to supply it with extra arguments. This will bind a new argument (<CodeStep step={2}>`productId`</CodeStep>) to the function in addition to the <CodeStep step={3}>`formData`</CodeStep> that is passed as an argument to the function.

```jsx [[1, 8, "bind"], [2,8, "productId"], [2,4, "productId"], [3,4, "formData"]]
import { updateCart } from './lib.js';
Expand Down Expand Up @@ -320,7 +320,7 @@ Displaying a form submission error message before the JavaScript bundle loads fo
1. the function passed to the `<form>`'s `action` prop be a [Server Function](/reference/rsc/server-functions)
1. the `useActionState` Hook be used to display the error message

`useActionState` takes two parameters: a [Server Function](/reference/rsc/server-functions) 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 display an error message. The value returned by the Server Function passed to `useActionState` will be used to update the state variable.
`useActionState` takes two parameters: a [Server Function](/reference/rsc/server-functions) 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 display an error message. The value returned by the Server Function passed to `useActionState` will be used to update the state variable.

<Sandpack>

Expand Down Expand Up @@ -368,13 +368,13 @@ export async function signUpNewUser(newEmail) {

</Sandpack>

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

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

Forms can be designed to handle multiple submission actions based on the button pressed by the user. Each button inside a form can be associated with a distinct action or behavior by setting the `formAction` prop.
Forms can be designed to handle multiple submission Actions based on the button pressed by the user. Each button inside a form can be associated with a distinct Action or behavior by setting the `formAction` prop.

When a user taps a specific button, the form is submitted, and a corresponding action, defined by that button's attributes and action, is executed. For instance, a form might submit an article for review by default but have a separate button with `formAction` set to save the article as a draft.
When a user taps a specific button, the form is submitted, and a corresponding Action, defined by that button's attributes and Action, is executed. For instance, a form might submit an article for review by default but have a separate button with `formAction` set to save the article as a draft.

<Sandpack>

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,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.
* [`useActionState`](/reference/react/useActionState) allows you to manage state of Actions.

---

Expand Down
6 changes: 3 additions & 3 deletions src/content/reference/react/useActionState.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ function MyCart({initialState}) {
* The `dispatchAction` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
* When using the `permalink` option, ensure the same form component is rendered on the destination page (including the same `reducerAction` and `permalink`) so React knows how to pass the state through. Once the page becomes interactive, this parameter has no effect.
* When using Server Functions, `initialState` needs to be [serializable](/reference/rsc/use-server#serializable-parameters-and-return-values) (values like plain objects, arrays, strings, and numbers).
* If `dispatchAction` throws an error, React cancels all queued actions and shows the nearest [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary).
* If `dispatchAction` throws an error, React cancels all queued Actions and shows the nearest [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary).
* If there are multiple ongoing Actions, React batches them together. This is a limitation that may be removed in a future release.

<Note>
Expand Down Expand Up @@ -269,7 +269,7 @@ Try clicking "Add Ticket" multiple times. Every time you click, a new `addToCart

We have to wait for the previous result of `addToCartAction` in order to pass the `prevCount` to the next call to `addToCartAction`. That means React has to wait for the previous Action to finish before calling the next Action.

You can typically solve this by [using with useOptimistic](/reference/react/useActionState#using-with-useoptimistic) but for more complex cases you may want to consider [cancelling queued actions](#cancelling-queued-actions) or not using `useActionState`.
You can typically solve this by [using with useOptimistic](/reference/react/useActionState#using-with-useoptimistic) but for more complex cases you may want to consider [cancelling queued Actions](#cancelling-queued-actions) or not using `useActionState`.

</DeepDive>

Expand Down Expand Up @@ -1423,7 +1423,7 @@ function action(prevState, formData) {

---

### My actions are being skipped {/*actions-skipped*/}
### My Actions are being skipped {/*actions-skipped*/}

If you call `dispatchAction` multiple times and some of them don't run, it may be because an earlier `dispatchAction` call threw an error.

Expand Down
8 changes: 4 additions & 4 deletions src/content/reference/react/useTransition.md
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ This is a basic example to demonstrate how Actions work, but this example does n

For common use cases, React provides built-in abstractions such as:
- [`useActionState`](/reference/react/useActionState)
- [`<form>` actions](/reference/react-dom/components/form)
- [`<form>` Actions](/reference/react-dom/components/form)
- [Server Functions](/reference/rsc/server-functions)

These solutions handle request ordering for you. When using Transitions to build your own custom hooks or libraries that manage async state transitions, you have greater control over the request ordering, but you must handle it yourself.
Expand Down Expand Up @@ -748,7 +748,7 @@ b { display: inline-block; margin-right: 10px; }

When exposing an `action` prop from a component, you should `await` it inside the transition.

This allows the `action` callback to be either synchronous or asynchronous without requiring an additional `startTransition` to wrap the `await` in the action.
This allows the `action` callback to be either synchronous or asynchronous without requiring an additional `startTransition` to wrap the `await` in the Action.

</Note>

Expand Down Expand Up @@ -1256,7 +1256,7 @@ This is recommended for three reasons:

- [Transitions are interruptible,](#perform-non-blocking-updates-with-actions) which lets the user click away without waiting for the re-render to complete.
- [Transitions prevent unwanted loading indicators,](#preventing-unwanted-loading-indicators) which lets the user avoid jarring jumps on navigation.
- [Transitions wait for all pending actions](#perform-non-blocking-updates-with-actions) which lets the user wait for side effects to complete before the new page is shown.
- [Transitions wait for all pending Actions](#perform-non-blocking-updates-with-actions) which lets the user wait for side effects to complete before the new page is shown.

Here is a simplified router example using Transitions for navigations.

Expand Down Expand Up @@ -1957,7 +1957,7 @@ export async function updateQuantity(newName) {

When clicking multiple times, it's possible for previous requests to finish after later requests. When this happens, React currently has no way to know the intended order. This is because the updates are scheduled asynchronously, and React loses context of the order across the async boundary.

This is expected, because Actions within a Transition do not guarantee execution order. For common use cases, React provides higher-level abstractions like [`useActionState`](/reference/react/useActionState) and [`<form>` actions](/reference/react-dom/components/form) that handle ordering for you. For advanced use cases, you'll need to implement your own queuing and abort logic to handle this.
This is expected, because Actions within a Transition do not guarantee execution order. For common use cases, React provides higher-level abstractions like [`useActionState`](/reference/react/useActionState) and [`<form>` Actions](/reference/react-dom/components/form) that handle ordering for you. For advanced use cases, you'll need to implement your own queuing and abort logic to handle this.


Example of `useActionState` handling execution order:
Expand Down
4 changes: 2 additions & 2 deletions src/content/reference/rsc/server-functions.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ title: Server Functions

Server Functions are for use in [React Server Components](/reference/rsc/server-components).

**Note:** Until September 2024, we referred to all Server Functions as "Server Actions". If a Server Function is passed to an action prop or called from inside an action then it is a Server Action, but not all Server Functions are Server Actions. The naming in this documentation has been updated to reflect that Server Functions can be used for multiple purposes.
**Note:** Until September 2024, we referred to all Server Functions as "Server Actions". If a Server Function is passed to an Action prop or called from inside an Action then it is a Server Action, but not all Server Functions are Server Actions. The naming in this documentation has been updated to reflect that Server Functions can be used for multiple purposes.

</RSC>

Expand Down Expand Up @@ -176,7 +176,7 @@ For more, see the docs for [Server Functions in Forms](/reference/rsc/use-server

### Server Functions with `useActionState` {/*server-functions-with-use-action-state*/}

You can call Server Functions with `useActionState` for the common case where you just need access to the action pending state and last returned response:
You can call Server Functions with `useActionState` for the common case where you just need access to the Action pending state and last returned response:

```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
"use client";
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/rsc/use-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Instead of individually marking functions with `'use server'`, you can add the d
* Because the underlying network calls are always asynchronous, `'use server'` can only be used on async functions.
* Always treat arguments to Server Functions as untrusted input and authorize any mutations. See [security considerations](#security).
* Server Functions should be called in a [Transition](/reference/react/useTransition). Server Functions passed to [`<form action>`](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition.
* Server Functions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Functions typically process one action at a time and do not have a way to cache the return value.
* Server Functions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Functions typically process one Action at a time and do not have a way to cache the return value.

### Security considerations {/*security*/}

Expand Down
Loading