Comments (25)
this is very strange to put code in docs that does not work in stable version of next
from next.js.
For those who need it, here is an example using the useFormState
hook:
the frontend
'use client'
import { someAction } from '@/app/actions'
import { useFormStatus, useFormState } from 'react-dom'
const initialState = {
message: '',
}
export default function UploadFileForm() {
const [state, formAction] = useFormState(someAction, initialState)
return (
<form className="flex flex-col gap-2" action={formAction}>
<div className="grid w-full max-w-sm items-center gap-1.5">
<label htmlFor="someInput">Some input</label>
<input id="someInput" name="someInput" type="text" required />
</div>
<SubmitButton />
{/* not-sr-only will make the message visible, making the element visible to sighted users as well as screen readers. */}
<p aria-live="polite" className="not-sr-only">
{state?.message}
</p>
</form>
)
}
function SubmitButton() {
const { pending } = useFormStatus()
return (
<button type="submit" disabled={pending}>
{pending ? 'Doing form action...' : 'Do form action'}
</button>
)
}
the server action
'use server'
export async function someAction(prevState: any, formData: FormData) {
// ...
return {
message: 'A message from the server action, yay!',
}
}
thanks to @zachblume and @slimshreydy for the reminder of that hook
from next.js.
I was able to work around this by using these package versions:
"dependencies": {
"next": "14.3.0-canary.59",
"react": "19.0.0-beta-4508873393-20240430",
"react-dom": "19.0.0-beta-4508873393-20240430"
}
Not sure what the issue is; maybe useActionState
was removed from React 18.x?
from next.js.
Weird. The docs should definitely be rewritten to refer to useFormState
until useActionState
lands in next@latest
from next.js.
Yea could we get the old useFormState
example until the useActionState
updates are merged to the non-canary version of Next?
from next.js.
The docs appear to have been updated to useFormState
from next.js.
Shouldn't this be reopened until some sort of solution is implemented, or at least the documentation is updated?
from next.js.
Just hit the same issue. The package in their next-forms example does not mention the fact it's a canary release, just uses the 'latest' version.
from next.js.
I was also stumbled by misleading documentation.
If the docs could be reverted then that would save time.
Thanks @YO-SC for the correct docs - saved me googling time.
from next.js.
I was able to find the correct docs by switching branch.
https://github.com/vercel/next.js/blob/v14.2.3/examples/next-forms/app/add-form.tsx
from next.js.
Oh the link you provided was from react and I was talking about the next docs and it says in the note that useActionState is canary and useFormState will be deprecated so what I am to assume is that use action state will be react 19 and next 15. Next fix their docs and I'm sure they'll update them again once they release 15
Oh yea. But anyway I will still be sticking to use useFormState()
until Next.js officially mark it as a deprecated one.
I still have this error with using react version 18 and Next.js version of 14.2.3
"dependencies": {
"react": "^18",
"next": "14.2.3"
"react-dom": "^18"
}
from next.js.
Just to note I also replaced the stater code from the base page to call the Signup component I created using the docs.
from next.js.
I think a bit hard to go through your repo. But I usually get this error when Im trying to use a client side hook. In order to fix this, you can just add:
"use client" to the top of the page.
See: https://nextjs.org/docs/app/building-your-application/rendering/client-components
from next.js.
sorry I didn't included the code I used , it is from the example the docs:
//@/app/ui/signup.tsx
'use client'
import { useActionState } from 'react'
import { createUser } from '@/app/actions'
const initialState = {
message: '',
}
export function Signup() {
const [state, formAction] = useActionState(createUser, initialState)
return (
<form action={formAction}>
<label htmlFor="email">Email</label>
<input type="text" id="email" name="email" required />
{/* ... */}
<p aria-live="polite" className="sr-only">
{state?.message}
</p>
<button>Sign up</button>
</form>
)
}
export default Signup
and
//@/app/actions.tsx
'use server'
import { z } from 'zod'
const schema = z.object({
email: z.string({
invalid_type_error: 'Invalid Email',
}),
})
export async function createUser(prevState: any, formData: FormData) {
const validatedFields = schema.safeParse({
email: formData.get('email'),
})
// Return early if the form data is invalid
if (!validatedFields.success) {
return {
errors: validatedFields.error.flatten().fieldErrors,
}
}
return {
message: 'Please enter a valid email',
}
}
from next.js.
When I looked at the react docs it says it's only available in canary, but that makes me wonder? I never knew features went backwards
from next.js.
I updated my dependencies to the ones you suggested and ran npm i --force and the issue was resolved. Do we know when it will make its way to the stable channel?
from next.js.
Okay I can reopen it. I guess you're right it would be good to update the documentation. I just figured because it's in Canary that it would be back to the stable channel shortly
from next.js.
I don't know if it matters but I updated the repo I provided with both solutions ( using canary, using useFormState) as branches. Thanks again for your help. I wonder if i should close this issue because it is fixed in canary and I have a work around?
from next.js.
this is really strange to mention a function from canary in documentation where we surely assume all its code come from latest stable release, hope they quickly add hint in documention or merge function to latest stable release
from next.js.
I'm assuming it will be in 14.3 but I'm not sure when that will be.
from next.js.
is there a stable way to know the pending state of a server action? I just want to add a loading spinner to a button but it isn't a part of a form
from next.js.
is there a stable way to know the pending state of a server action? I just want to add a loading spinner to a button but it isn't a part of a form
If you need that behaviour, what comes to my mind is to use some sort of shared/global state, pass the pending
value (from the useFormState
hook) to it, and use that global state value where needed.
Tools like jotai should help. As far as "backed in" nextjs solutions, i don't know of any.
This might not be the best way to do it tho. If any more devs see this and got some ideas feel free to share em.
from next.js.
The docs appear to have been updated to useFormState
I don't see docs has been updated if you are referring to React documentation version 18.3.1.
It is still showing useActionState()
if I'm not getting wrong?
There are some further descriptions about [useActionState()
] too.
from next.js.
I provided a link where at the top, on that page it use to have useActionState now has useFormState
from next.js.
Oh the link you provided was from react and I was talking about the next docs and it says in the note that useActionState is canary and useFormState will be deprecated so what I am to assume is that use action state will be react 19 and next 15. Next fix their docs and I'm sure they'll update them again once they release 15
from next.js.
Related Issues (20)
- Unable to build next js
- Next Build fails with Turborepo v2 and bun as package manarger HOT 1
- intercepting routes return 404
- Server Side Exception during Production while implementing pagination and reading from search params. Application error: a server-side exception has occurred (see the server logs for more information). Digest: 163034583 HOT 1
- Tailwindcss "content" when using src directory
- --turbo does not work with tailwindcss HOT 1
- Symlinks issue, with tailwind especially
- Can't filter server-side based on client export
- SWC build BigInt and Math.pow BUG HOT 1
- PDFJS-DIST bug when using dev mode with Turbopack HOT 1
- PDFJS-DIST bug when using dev mode with Turbopack
- Error: Element type is invalid: expected a string but got: object. HOT 1
- Server action returning redirect to another root route group fails
- Canonical URLs with path extension (e.g. .html) get a trailing slash when it shouldn't
- Can not export class in action server (only async function)
- NextJS does not work with FreeBSD
- styled-components don't rehyrdate properly in React Server Components
- GET and PUT route in same route handler causes 405 Method Not Allowed HOT 2
- Incomplete URL in `next/link` crashes the app in production HOT 1
- Double redirected to basePath if the application is initially loaded not at the root.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.