Learn React 19: The Complete Guide to Modern Web Apps/

...

/

Building Instant Feedback with useOptimistic

Building Instant Feedback with useOptimistic

Use React 19’s useOptimistic to show instant UI updates while an async action is still in flight, then reconcile with the real result.

We'll cover the following...

A responsive interface keeps users engaged. They should see their actions reflected immediately, without waiting for background processes to complete. Traditionally, we’d update the state only after the server responds. React 19 introduces the useOptimistic hook, which lets us optimistically update the UI first — showing instant feedback — and then merge in the real result when it arrives, or roll back gracefully if the operation fails.

Concept: What useOptimistic does

useOptimistic lets us derive an optimistic state from our base state while an action is pending.

const [optimisticValue, addOptimisticValue] = useOptimistic(
  baseValue,
  (current, pendingUpdate) => /* return new optimistic state */
);

  • baseValue is our source of truth (e.g., comments from server or parent state).

  • optimisticValue is what we render immediately.

  • addOptimisticValue(update) applies a temporary change (e.g., add a pending comment).

  • When our async action resolves, we update base state; React re-derives the optimistic view from the new base.

The following illustration shows an optimistic UI flow. When a user submits a comment, it ...