Part 44: React 19 Actions, useActionState & Modern Form APIs

React 19 introduces native support for Actions—functions that handle async operations and manage pending states, optimistic updates, and error handling automatically.

1. What are Actions?

By convention, functions that handle asynchronous state transitions with automatic pending management are called Actions.

Instead of writing manual isLoading, setIsLoading(true), try/catch/finally blocks, React 19 provides built-in hooks: - useActionState - useFormStatus - useOptimistic

2. useActionState in Action

import { useActionState } from 'react';

async function updateUsername(previousState, formData) {
  const newName = formData.get('username');
  try {
    const res = await api.updateName(newName);
    return { success: true, name: res.name, error: null };
  } catch (err) {
    return { success: false, name: previousState.name, error: err.message };
  }
}

export default function UserProfileForm() {
  const [state, formAction, isPending] = useActionState(updateUsername, {
    name: 'Alex',
    error: null,
    success: false
  });

  return (
    <form action={formAction} className="p-4 border rounded">
      <h3>Current User: {state.name}</h3>
      <input name="username" defaultValue={state.name} className="border p-2" />

      <button type="submit" disabled={isPending} className="btn-primary ml-2">
        {isPending ? 'Updating...' : 'Save Name'}
      </button>

      {state.error && <p className="text-red-500">{state.error}</p>}
      {state.success && <p className="text-green-600">Updated successfully!</p>}
    </form>
  );
}

3. useFormStatus for Child Components

Access parent form submission status anywhere in child elements without passing props:

import { useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = useFormStatus();

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

Key Takeaways

• React 19 simplifies form handling and async state via native Actions.
• useActionState manages state, action handlers, and loading indicators automatically.
• useFormStatus allows child submit buttons to read pending status without prop drilling.

In Part 45, we examine Higher-Order Components (HOC) and Render Props Patterns!