React Academy · Lesson

useOptimistic for Instant Feedback

Show optimistic UI updates while a server mutation is in flight with useOptimistic.

useOptimistic for Instant Feedback is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will use React 19's useOptimistic hook to show instant optimistic UI changes while a server mutation is in progress, with automatic rollback on failure.

What Is Optimistic UI?

Optimistic UI means assuming a server mutation will succeed and updating the UI immediately, without waiting for the server response. If it fails, you roll back to the previous state.

useOptimistic Basics

useOptimistic accepts the actual state and an updater function. It returns the optimistic state and a function to apply optimistic updates.

'use client';
import { useOptimistic } from 'react';

const [optimisticLikes, addOptimisticLike] = useOptimistic(
  likes,                      // actual state from server
  (state, newLike) => [...state, newLike] // how to apply optimistic update
);

Like Button Example

When the user clicks Like, immediately show the new like in the UI via addOptimisticLike, then send the actual request. If the request fails, optimistic state automatically reverts to the actual state.

async function handleLike() {
  addOptimisticLike({ id: Date.now(), user: currentUser });
  await likePost(postId); // server action
}

Where optimistic State Lives

optimisticLikes shows the optimistic value during the transition. Once the server responds and the actual `likes` state updates (via revalidation), useOptimistic automatically syncs back to actual.

Pending Indicator on Optimistic Items

Mark optimistic items visually (e.g. slightly dimmed) so users know they are pending. You can add a `pending: true` flag in the optimistic update and style accordingly.

const [optimisticMessages, addOptimistic] = useOptimistic(
  messages,
  (state, msg) => [...state, { ...msg, pending: true }]
);

// Render
{optimisticMessages.map(m => (
  <div key={m.id} style={{ opacity: m.pending ? 0.6 : 1 }}>{m.text}</div>
))}

Using Inside a Transition

useOptimistic only works inside a React Transition (startTransition or useTransition). When using Server Actions with React 19, this is handled automatically.

'use client';
import { startTransition } from 'react';

const handleSubmit = (data) => {
  startTransition(async () => {
    addOptimistic(data);
    await serverAction(data);
  });
};

Chat Message Sending Example

Show a sent message immediately in the chat list while the server saves it. The message appears instantly with a 'Sending...' status, then switches to 'Sent' when the server confirms.

Error Rollback Behaviour

If the server action fails (throws or rejects), useOptimistic automatically discards the optimistic value and reverts to the last actual state. You do not need to implement rollback manually.

useOptimistic vs Manual Optimistic Updates

Before useOptimistic, you managed two state variables (actual + optimistic) and rolled back manually in a catch block. useOptimistic collapses this into a single hook with automatic rollback.

Quick Check

What happens to the optimistic state if the server action that triggered it fails?

Recap

useOptimistic(actualState, updater) returns [optimisticState, addOptimistic]. Call addOptimistic before the server action for instant feedback. React auto-reverts if the action fails. Works inside React Transitions.

Course Complete

Congratulations! You finished **Server Components & React 19 Features**. You now understand RSCs, the use() hook, Actions, useActionState, and useOptimistic for modern React development.

Frequently asked questions

Is the “useOptimistic for Instant Feedback” lesson free?

Yes — the full text of “useOptimistic for Instant Feedback” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “useOptimistic for Instant Feedback”?

Show optimistic UI updates while a server mutation is in flight with useOptimistic. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “useOptimistic for Instant Feedback” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy