Skip to content

The useFormStatus Hook

THE AHA STACK MASTERCLASS

Launching May 27th

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>
  )
}

→ Get my React Beginner's Handbook

I wrote 20 books to help you become a better developer:

  • Astro Handbook
  • HTML Handbook
  • Next.js Pages Router Handbook
  • Alpine.js Handbook
  • HTMX Handbook
  • TypeScript Handbook
  • React Handbook
  • SQL Handbook
  • Git Cheat Sheet
  • Laravel Handbook
  • Express Handbook
  • Swift Handbook
  • Go Handbook
  • PHP Handbook
  • Python Handbook
  • Linux Commands Handbook
  • C Handbook
  • JavaScript Handbook
  • CSS Handbook
  • Node.js Handbook
...download them all now!

Related posts that talk about react: