The useActionState hook

(in previous React canary versions known as useFormState)

Client components can use this new hook to “peek” into the state of a server action.

We basically pass it the server action, and an initial state object.

What we get back is the state object, the form action we attach to the form, and the pending object:

"use client"

import { useActionState } from "react"

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>}
        <button
          aria-disabled={pending}
          type='submit'>
          {pending ? "Submitting..." : "Submit"}
        </button>
      </form>
    </div>
  )
}

Basically we have a very easy way of handing feedback from the server action (in this case we assume it returns an object with a message string), and we have an easy way of handling the pending state, so we can disable the button while the action is running.

Stuff we didn’t implement before, but you can see how it’s quick to implement using useActionState.