reactjs / reactjs/react.dev

[Mistakes]: Server Functions examples use incompatible action signatures

Open
#8,537 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: typos
Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

Summary

The updateName Server Function is defined as updateName(name), but the page later uses it as a direct form action and with useActionState. These usages pass different arguments, so the examples cannot work with the shown function.

Page

https://react.dev/reference/rsc/server-functions

Details

The page defines:

export async function updateName(name) {
  if (!name) {
    return {error: 'Name is required'};
  }
  await db.users.updateName(name);
}

There are several inconsistencies/mistakes:

  • In “Server Functions with Actions”, the input does not update the name state, so updateName(name) always receives ''.

  • On success, updateName returns undefined, but the client destructures {error} from its result.

  • When passed to <form action={updateName}>, React calls updateName with FormData, not a string.

  • When passed to useActionState, React calls it with (previousState, FormData), and it must consistently return the next state.

The examples should define a Server Function with the correct parameters and return value for each usage.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Server Functions reference page at https://react.dev/reference/rsc/server-functions and compare the updateName example across “Server Functions with Actions,” the direct form action, and useActionState usage. Done means each example’s parameters and return value match the way React invokes it, including the FormData and previous-state arguments.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.