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 to be its own component, shared across different forms across 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: