You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/form.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -83,13 +83,13 @@ export default function Search() {
83
83
84
84
</Sandpack>
85
85
86
-
### Handle form submission with a Server Action {/*handle-form-submission-with-a-server-action*/}
86
+
### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
87
87
88
-
Render a `<form>` with an input and submit button. Pass a Server Action (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.
88
+
Render a `<form>` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.
89
89
90
-
Passing a Server Action 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.
90
+
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.
91
91
92
-
You can use hidden form fields to provide data to the `<form>`'s action. The Server Action will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
92
+
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).
93
93
94
94
```jsx
95
95
import { updateCart } from'./lib.js';
@@ -129,7 +129,7 @@ function AddToCart({productId}) {
129
129
}
130
130
```
131
131
132
-
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Action](/reference/rsc/use-server) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
132
+
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-function) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
133
133
134
134
### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
135
135
To display a pending state when a form is being submitted, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
@@ -315,10 +315,10 @@ export default function Search() {
315
315
Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that:
316
316
317
317
1.`<form>` be rendered by a [Server Component](/reference/rsc/use-client)
318
-
1. the function passed to the `<form>`'s `action` prop be a [Server Action](/reference/rsc/use-server)
318
+
1. the function passed to the `<form>`'s `action` prop be a [Server Function](/reference/rsc/server-functions)
319
319
1. the `useActionState` Hook be used to display the error message
320
320
321
-
`useActionState` takes two parameters: a [Server Action](/reference/rsc/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/rsc/use-server) passed to `useActionState` will be used to update the state variable.
321
+
`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.
Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Action, an error will be thrown with message you defined when you called `taintUniqueValue`.
195
+
Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Function, an error will be thrown with message you defined when you called `taintUniqueValue`.
Copy file name to clipboardExpand all lines: src/content/reference/react/use.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -48,8 +48,8 @@ The `use` API returns the value that was read from the resource like the resolve
48
48
#### Caveats {/*caveats*/}
49
49
50
50
* The `use` API must be called inside a Component or a Hook.
51
-
* When fetching data in a [Server Component](/reference/rsc/use-server), prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved.
52
-
* Prefer creating Promises in [Server Components](/reference/rsc/use-server) and passing them to [Client Components](/reference/rsc/use-client) over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders. [See this example](#streaming-data-from-server-to-client).
51
+
* When fetching data in a [Server Component](/reference/rsc/server-components), prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved.
52
+
* Prefer creating Promises in [Server Components](/reference/rsc/server-components) and passing them to [Client Components](/reference/rsc/use-client) over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders. [See this example](#streaming-data-from-server-to-client).
Copy file name to clipboardExpand all lines: src/content/reference/react/useActionState.md
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -51,15 +51,15 @@ function StatefulForm({}) {
51
51
52
52
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.
53
53
54
-
If used with a Server Action, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed.
54
+
If used with a Server Function, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed.
55
55
56
56
[See more examples below.](#usage)
57
57
58
58
#### Parameters {/*parameters*/}
59
59
60
60
* `fn`: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
61
61
* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
62
-
* **optional** `permalink`: A string containing the unique page URL that this form modifies. For use on pages with dynamic content (eg: feeds) in conjunction with progressive enhancement: if `fn` is a [server action](/reference/rsc/use-server) and the form is submitted before the JavaScript bundle loads, the browser will navigate to the specified permalink URL, rather than the current page's URL. Ensure that the same form component is rendered on the destination page (including the same action `fn` and `permalink`) so that React knows how to pass the state through. Once the form has been hydrated, this parameter has no effect.
62
+
* **optional** `permalink`: A string containing the unique page URL that this form modifies. For use on pages with dynamic content (eg: feeds) in conjunction with progressive enhancement: if `fn` is a [server function](/reference/rsc/server-functions) and the form is submitted before the JavaScript bundle loads, the browser will navigate to the specified permalink URL, rather than the current page's URL. Ensure that the same form component is rendered on the destination page (including the same action `fn` and `permalink`) so that React knows how to pass the state through. Once the form has been hydrated, this parameter has no effect.
63
63
64
64
{/* TODO T164397693: link to serializable values docs once it exists */}
65
65
@@ -118,7 +118,7 @@ function action(currentState, formData) {
118
118
119
119
#### Display form errors {/*display-form-errors*/}
120
120
121
-
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`.
121
+
To display messages such as an error message or toast that's returned by a Server Function, wrap the action in a call to `useActionState`.
122
122
123
123
<Sandpack>
124
124
@@ -190,7 +190,7 @@ form button {
190
190
191
191
#### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/}
192
192
193
-
The return value from a Server Action can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
193
+
The return value from a Server Function can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
Copy file name to clipboardExpand all lines: src/content/reference/rsc/server-components.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -193,7 +193,7 @@ Server Components are not sent to the browser, so they cannot use interactive AP
193
193
194
194
#### There is no directive for Server Components. {/*there-is-no-directive-for-server-components*/}
195
195
196
-
A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Actions.
196
+
A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Functions.
197
197
198
198
For more info, see the docs for [Directives](/reference/rsc/directives).
0 commit comments