`useFormStatus` must run in a Client Component that is a descendant of the `<form>` using the action: ```tsx 'use client' import { useFormStatus } from 'react-dom' function SubmitButton() { const { pending } = useFormStatus() return <button disabled={pending}>{pending ? 'Saving…' : 'Save'}</button> } ``` Use `<form action={serverAction}>` and render `SubmitButton` inside it. Keep the action server-side and validate/authenticate it independently.
Installs into .claude/skills of the current project.
Are you the author of Nextjs Server Actions?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/hoangnguyen0403-nextjs-server-actions-c48ab44b)
`useFormStatus` must run in a Client Component that is a descendant of the `<form>` using the action:
```tsx
'use client'
import { useFormStatus } from 'react-dom'
function SubmitButton() {
const { pending } = useFormStatus()
return <button disabled={pending}>{pending ? 'Saving…' : 'Save'}</button>
}
```
Use `<form action={serverAction}>` and render `SubmitButton` inside it. Keep the action server-side and validate/authenticate it independently.
