Mastering React 19 Server Actions and Custom Optimistic Updates

React 19 brings native support for server actions, making form submissions and mutations cleaner than ever.

The New useActionState Hook

Instead of manual loading flags and error states, React 19 introduces useActionState (previously useFormState) to handle actions and pending states:

const [state, formAction, isPending] = useActionState(async (prevState, formData) => {
  const result = await saveMessage(formData.get("message"));
  return result;
}, null);

Enhancing UX with useOptimistic

The useOptimistic hook allows you to render the expected output immediately on the client while the network request is still resolving:

const [optimisticMessages, addOptimisticMessage] = useOptimistic(
  messages,
  (state, newMessage: string) => [...state, { text: newMessage, sending: true }]
);

By combining these features, you can build rich web applications that respond instantaneously.