Simplify Form Handling in React 19: Introducing `useActionState` Hook

1"use client";
2
3export const FormAction = () => {
4  return (
5    <div>
6      <form>
7        <input type="text" name="name" value="Hello from actions" readOnly />
8        <button type="submit">Submit</button>
9      </form>
10      <footer>
11        <p>Awaiting action 🚀</p>
12      </footer>
13    </div>
14  );
15};

1// canary.d.ts
2export function useActionState<State, Payload>(
3  action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
4  initialState: Awaited<State>
5): [
6  state: Awaited<State>,
7  dispatch: (payload: Payload) => void,
8  isPending: boolean
9];

1"use client";
2
3import { useActionState } from "react";
4
5type State = { data: string; status: "SUCCESS" } | { status: "ERROR" | "INIT" };
6const initState: State = { status: "INIT" };
7
8export const FormAction = () => {
9  const [action, submitAction, isPending] = useActionState(
10    async (prevState: State, formData: FormData) =>
11      runAction(prevState, String(formData.get("name"))),
12    initState
13  );
14
15  return (
16    <div>
17      <form action={submitAction}>
18        <input type="text" name="name" value="Hello from actions" readOnly />
19        <button type="submit" disabled={isPending}>
20          Submit
21        </button>
22      </form>
23      <footer>
24        {action.status === "INIT" && <p>Awaiting action 🚀</p>}
25        {action.status === "SUCCESS" && <p>Success, all good ✅</p>}
26        {action.status === "ERROR" && <p>Error, please resubmit action ❌</p>}
27        <code>{JSON.stringify({ isPending })}</code>
28        <code>{JSON.stringify(action)}</code>
29      </footer>
30    </div>
31  );
32};

1async function runAction(_prevState: State, data: string) {
2  return new Promise<State>((r) => {
3    setTimeout(
4      () =>
5        Math.random() < 0.5
6          ? r({ data, status: "SUCCESS" })
7          : r({ status: "ERROR" }),
8      1500
9    );
10  });
11}