Form + useActionState example from React 19 docs causes error when using Next

[benblank]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/elegant-lederberg-2yjhcf

To Reproduce

1. Visit the linked CodeSandbox.
2. Start the dev server, if necessary.
3. Open the preview, if necessary.
4. Visit the /form route.

Current vs. Expected behavior

I expected the component to work in Next the same as it had in React's documentation. However, when visiting a Next route containing that example, the error below appears, indicating that useActionState can only be used within client components. That seems to contradict the React docs for that example, which explicitly require that the "<form> be rendered by a Server Component" for progressive enhancement to occur.

 ✓ Compiled /form in 398ms
 ⨯ ./app/form/page.jsx:1:10
Ecmascript file had an error
> 1 | import { useActionState } from "react";
    |          ^^^^^^^^^^^^^^
  2 | import { signUpNewUser } from "./api";
  3 |
  4 | export default function Page() {

You're importing a component that needs `useActionState`. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the `"use client"` directive.

 Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.6.0-canary.53 // Latest available version is detected (15.6.0-canary.53).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This could instead be an issue with the React docs rather than with Next, but the CodeSandbox example in the docs (you can access it directly via the "fork" link) indeed appears to be a server component (it doesn't contain the "use client" directive), so I'm currently assuming this is particular to Next.

[icyJoseph]

That example is a CSR'd app though https://codesandbox.io/p/sandbox/7wxfrz?file=%2Fsrc%2FApp.js that's why it doesn't contain the use client directive.

[benblank]

Okay, so that doesn't help determining whether the issue is in Next or in the React docs.

Any thoughts on where the disconnect might be, then? Having thought on it further, the type of progressive enhancement described in the React docs certainly sounds like it would need to involve SSR. But I'm still catching up on recent React changes and brand new to Next, so I'm hesitant to trust my intuition. 😅

[icyJoseph]

Right, since you are using useActionState in a framework that supports React Server Components, you have to use use client, because otherwise the bundler attempts to do Server Components by default.

The codesandbox fork in the React docs is using react-scripts (create-react-app), and AFAIK that never got to support React Server Components. That being said useActionState, just like useState and others is not exclusive to React Server Components bundling so to speak, you can just use it.

To get the progressive enhancement, they do mention: <form> be rendered by a [Server Component](https://react.dev/reference/rsc/use-client)

[mdj-uk]

Unfortunately that's a mistake in the react docs when they say that <form> must be rendered by a Server Component to get progressive enhancement of error messages - it's been confusing people for a long time (see for example reactjs/react.dev#6601 and reactjs/react.dev#6627). The link actually takes you to the page for a 'use client'.

[benblank]

Aha, so it sounds like the React docs should say something more like "for progressive enhancement, the <form> element needs to be rendered using React Server Components, by a Client Component" — because the hook can only work on the client, but the "without JavaScript" progressive enhancement requires some level of SSR. Yes?

I had seen that the link was to the "use client" page, but assumed that was just because the page also goes over the definition of "Server Component" and "Client Component" and the differences between them. 😅

Thanks so much for helping me get this straight! I'm going to go ahead and close the issue now, since this clearly isn't a Next issue.

[mdj-uk]

Aha, so it sounds like the React docs should say something more like "for progressive enhancement, the <form> element needs to be rendered using React Server Components, by a Client Component" — because the hook can only work on the client, but the "without JavaScript" progressive enhancement requires some level of SSR. Yes?

Yep that's my understanding, in the case where you have error messages to deal with - though to be clear I'm not on the react or nextjs team I'm just a nobody who got confused by this a while ago :-)

To get progressive enhancement including error messages you need an SSR'd client component which calls useActionState(myServerAction, initialState) and renders the form with the resulting action. Then you can submit the form before js has loaded and the html you get back will include the error message. Which is amazing!

If you don't care about the error message and don't need useActionState you can render <form action={myServerAction} > directly from a server component which will also submit without js.