Search⌘ K
AI Features
Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps

Building Instant Feedback with useOptimistic

Discover how to create responsive user interfaces that provide immediate feedback using React 19's useOptimistic hook. This lesson teaches you to optimistically update UI elements like comments and likes before server confirmation, improving perceived performance. You will learn how to manage base and optimistic states, handle asynchronous actions gracefully, and build interactive, real-world form features with instant feedback.

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 ...