Skip to content

Fix server action code example - #7202

Closed
IGassmann wants to merge 5 commits into
reactjs:mainfrom
IGassmann:patch-1
Closed

IGassmann wants to merge 5 commits into
reactjs:mainfrom
IGassmann:patch-1

Conversation

@IGassmann

@IGassmann IGassmann commented Oct 2, 2024 •

Copy link
Copy Markdown

This fixes the code example in the "Composing Server Actions with Actions" section and updates the imports for all the code examples on the page to ensure consistency with the rest of the documentation.

@vercel

vercel Bot commented Oct 2, 2024 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
19-react-dev ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 2, 2024 9:55am
react-dev ✅ Ready (Inspect) Visit Preview Oct 2, 2024 9:55am

@facebook-github-bot

Copy link
Copy Markdown
Collaborator

Hi @IGassmann!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

@github-actions

github-actions Bot commented Oct 2, 2024 •

Copy link
Copy Markdown

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

@IGassmann IGassmann changed the title Add missing React imports Fixes server action code snippet Oct 2, 2024
@IGassmann IGassmann changed the title Fixes server action code snippet Fixes server action code example Oct 2, 2024
@IGassmann
IGassmann marked this pull request as ready for review October 2, 2024 09:32
```js [[1, 2, "createNoteAction"], [1, 5, "createNoteAction"], [1, 7, "createNoteAction"]]
"use client";
import {createNoteAction} from './actions';
import { createNoteAction } from './actions';

@IGassmann IGassmann Oct 2, 2024 •

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of the code examples in the docs have spaces within the brackets.

"use client";

import {updateName} from './actions';
import { useState, useTransition } from 'react';

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of the code examples in the docs imports the used React functions.

import { updateName } from './actions';

function UpdateName() {
const [name, setName] = useState('');

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The input wasn't using name since it's an uncontrolled input.

if (result?.error) {
setError(result.error);
} else {
setName('');

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the form submission succeeds, React already automatically resets the form. No need to reset manually the input value. However, we need to reset the error.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"When the form submission succeeds, React already automatically resets the form." sorry where's that claim coming from? In the official docs there's an example doing formRef.current.reset();, I guess exactly because it is not reset by default? (thought seeing the other mistakes there, it might be?).

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It comes from the docs as well.

I believe the example you mention resets the form manually because it's demonstrating optimistic behavior. If it didn't reset manually, it would have to wait for the request to complete for React to reset the form.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah gotcha, thanks! I am just a passerby that was curious about the PR though, cannot review/approve/etc here, but looks good!

return (
<form action={submitAction}>
<input type="text" name="name" disabled={isPending}/>
{state.error && <span>Failed: {state.error}</span>}

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

state didn't exist.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this def was a LLM

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and a bad one at that

@IGassmann
IGassmann requested a review from franciscop October 2, 2024 16:40
@EverStarck

EverStarck commented Oct 2, 2024 •

Copy link
Copy Markdown

i still can't believe that LLM code did it to prod 😭😭😭😭

@IGassmann IGassmann changed the title Fixes server action code example Fixe server action code example Oct 2, 2024
@IGassmann IGassmann changed the title Fixe server action code example Fix server action code example Oct 2, 2024
@aurorascharff

Copy link
Copy Markdown
Collaborator

Thanks for the contribution! #8538 has been merged and addresses these concerns. If you have further suggestions, please open a new PR and tag me and I’ll take a look!

This branch was successfully deployed

2 active deployments
Preview – react-dev — 9d670f00 Deployed Oct 2, 2024 by vercel[bot]
Preview – 19-react-dev — 9d670f00 Deployed Oct 2, 2024 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants