Forms example does not work with useActionState

[Tigatok]

trafficstars

Verify canary release

• [ ] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Node.js v22.0.0

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:17:33 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6031
  Available memory (MB): 36864
  Available CPU cores: 14
Binaries:
  Node: 22.0.0
  npm: 10.5.1
  Yarn: N/A
  pnpm: 9.1.2
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which example does this report relate to?

next-forms

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

The doc says to run pnpm create next-app --example next-forms next-forms-app, which downloads the code, but it doesn't use the next canary package, which means it doesn't use the react 19 package. When the user goes to run the project, they will get an issue with the react useActionState hook not being available.

I see there is an issue that changed the example to use useActionState, but it may be unclear to the user if they aren't aware they need to be on canary versions of next and react.

Expected Behavior

I would expect the example to run/work after running the create command.

To Reproduce

run the pnpm create command from the forms example.

[Booker-CU]

is there any update with this... I am trying to follow along on the Dashboard example here: https://nextjs.org/learn/dashboard-app/improving-accessibility (Chapter 14)

It is not possible to use useActionState anymore, so what should I use? Otherwise I can't finish this section. thx!!

[Tigatok]

@Booker-CU I am not sure if its applicable to you, but I ended up upgrading my nextJS and react to use the canary versions. Not ideal, but they work with the new useActionState.

[dimaportenko]

@Booker-CU as mentioned here https://github.com/facebook/react/issues/29017#issuecomment-2100762816, you can use useFormState from react-dom instead of useActionState. I was able to finish Chapter 14 with this solution.

[Ayub-7]

@dimaportenko did your deployment build successfully?

[dimaportenko]

@Ayub-7 not sure I understand your question, but npm run build works for me.

[Booker-CU]

@Booker-CU as mentioned here facebook/react#29017 (comment), you can use useFormState from react-dom instead of useActionState. I was able to finish Chapter 14 with this solution.

thank you for this... I'm going to try and move forward with it... sorry been away. thanks for the message

[devdariill]

Use useFormStatus() to disable the button.