Skip to content

more renames from actions to functions #7200

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.

Sign up for GitHub

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

Closed
wants to merge 2 commits into from
Closed

more renames from actions to functions #7200

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6024be
more renames from actions to functions
Oct 1, 2024
1747c2b
rename imports from functions to server
Oct 2, 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
24 changes: 12 additions & 12 deletions src/content/reference/rsc/server-functions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,30 +38,30 @@ Server Functions can be created in Server Components and passed as props to Clie

Server Components can define Server Functions with the `"use server"` directive:

```js [[2, 7, "'use server'"], [1, 5, "createNoteAction"], [1, 12, "createNoteAction"]]
```js [[2, 7, "'use server'"], [1, 5, "createNote"], [1, 12, "createNote"]]
// Server Component
import Button from './Button';

function EmptyNote () {
async function createNoteAction() {
async function createNote() {
// Server Function
'use server';

await db.notes.create();
}

return <Button onClick={createNoteAction}/>;
return <Button onClick={createNote}/>;
}
```

When React renders the `EmptyNote` Server Function, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided:
When React renders the `EmptyNote` Server Function, it will create a reference to the `createNote` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNote` function with the reference provided:

```js {5}
"use client";

export default function Button({onClick}) {
console.log(onClick);
// {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
// {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNote'}
return <button onClick={() => onClick()}>Create Empty Note</button>
}
```
Expand All @@ -82,15 +82,15 @@ export async function createNote() {

```

When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNoteAction` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNoteAction` function using the reference provided:
When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNote` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNote` function using the reference provided:

```js [[1, 2, "createNote"], [1, 5, "createNote"], [1, 7, "createNote"]]
"use client";
import {createNote} from './actions';
import {createNote} from './functions';

function EmptyNote() {
console.log(createNote);
// {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
// {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNote'}
<button onClick={() => createNote()} />
}
```
Expand All @@ -115,7 +115,7 @@ export async function updateName(name) {
```js [[1, 3, "updateName"], [1, 13, "updateName"], [2, 11, "submitAction"], [2, 23, "submitAction"]]
"use client";

import {updateName} from './actions';
import {updateName} from './functions';

function UpdateName() {
const [name, setName] = useState('');
Expand Down Expand Up @@ -157,7 +157,7 @@ You can pass a Server Function to a Form to automatically submit the form to the
```js [[1, 3, "updateName"], [1, 7, "updateName"]]
"use client";

import {updateName} from './actions';
import {updateName} from './functions';

function UpdateName() {
return (
Expand All @@ -179,7 +179,7 @@ You can call Server Functions with `useActionState` for the common case where yo
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
"use client";

import {updateName} from './actions';
import {updateName} from './functions';

function UpdateName() {
const [state, submitAction, isPending] = useActionState(updateName, {error: null});
Expand All @@ -204,7 +204,7 @@ Server Functions also support progressive enhancement with the third argument of
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
"use client";

import {updateName} from './actions';
import {updateName} from './functions';

function UpdateName() {
const [, submitAction] = useActionState(updateName, null, `/name/update`);
Expand Down
Loading