Similarly to how we can get an action’s pending state through useActionState, we can use useFormStatus to get a form action’s pending state from a component that’s included in a form.

For example, a submit button component. It’s common for it to be its own component, shared across different forms in the app, so this hook makes it easy to access its containing form’s pending state:

"use client"

import { useActionState } from "react"
import { useFormStatus } from 'react-dom'

import { myServerAction } from './actions'

const initialState = {
  message: "",
}

export const Demo = () => {
  const [state, formAction, pending] =
    useActionState(myServerAction, initialState)

  return (
    <div>
      <form action={formAction}>
        <input
          type='text'
          name='fullName'
        />
        {state?.message && <p>{state.message}</p>}
        <SubmitButton />
      </form>
    </div>
  )
}

const SubmitButton = () => {
  const { pending } = useFormStatus()

  return (
	  <button
      aria-disabled={pending}
      type='submit'>
      {pending ? "Submitting..." : "Submit"}
    </button>
  )
}

Lessons in this unit: