What is an Action in React 19?

An Action is an asynchronous function triggered by user interaction (such as a form submit). React automatically manages pending states, resets forms, and wraps updates in a transition.

What does useOptimistic do in React 19?

useOptimistic provides a way to optimistically update the user interface immediately while an asynchronous server request is still executing. If the server request succeeds, the real data replaces it; if it fails, React automatically rolls back to the previous state.

How does useActionState simplify form handling?

useActionState takes an action function and initial state, and returns [state, formAction, isPending]. It replaces the need to manually track useState for loading spinners, error messages, and response values.

React 19 Actions: Form Handling, useActionState & useOptimistic

Handling forms in React previously required extensive boilerplate: declaring isLoading, errorMessage, and data with useState, preventing default behavior on submit, and managing async try/catch blocks. React 19 Actions streamline form mutations into simple, native functions.

React 19 Actions and useOptimistic Flow Diagram

Figure 15: Optimistic UI Flow: User Submits ➔ Instant UI Update ➔ Background Server Action ➔ Confirm or Rollback.

Example: Like Button with useOptimistic & useActionState

import React, { useActionState, useOptimistic } from 'react';

// Server Action function
async function updateLikeAction(previousCount, formData) {
  // Simulate network delay to backend server
  await new Promise(res => setTimeout(res, 1000));
  return previousCount + 1;
}

export default function ArticleLikeWidget({ initialLikes }) {
  // 1. useActionState manages confirmed count and pending status
  const [likes, formAction, isPending] = useActionState(updateLikeAction, initialLikes);

  // 2. useOptimistic updates UI immediately without waiting for server!
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(
    likes,
    (current, update) => current + update
  );

  const handleSubmit = async (formData) => {
    // Instantly increment on screen!
    setOptimisticLikes(1);
    // Send request to server
    await formAction(formData);
  };

  return (
    <form action={handleSubmit}>
      <button type="submit" disabled={isPending}>
        ♥ {optimisticLikes} {isPending ? '(Saving...)' : 'Likes'}
      </button>
    </form>
  );
}