How to Improve User Feedback in React 19 with useOptimistic

Have you ever clicked a “Like” button and seen it update instantly — even before the server confirms your action? That’s called optimistic updates, and it’s one of the best ways to make your app feel fast and responsive.

With React 19, implementing optimistic updates has become easier than ever, thanks to a new hook called useOptimistic. It lets your UI update immediately while React quietly waits for the real server response — no complicated state juggling or temporary variables required.

In this blog, we’ll explore how useOptimistic works and how you can use it to enhance user experience in your React apps.

What Are Optimistic Updates?

Normally, when a user performs an action — like submitting a form or toggling a like button — the UI waits until the server confirms the change. That delay, even if small, can make the app feel sluggish.

With optimistic updates, the UI immediately reflects the expected change, giving users instant feedback. If the server later confirms the action, the UI stays as-is; if there’s an error, you can roll it back gracefully.

Introducing useOptimistic in React 19

React 19 introduces useOptimistic as a built-in hook to make optimistic UI updates simple and declarative.

Here’s the syntax:

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

• state – Your current state (like a list of comments or likes).
• updateFn – A function describing how to optimistically update the state.
• addOptimistic – A function that triggers the optimistic update when an action happens.

Example: Building a Like Button with useOptimistic

Let’s see how useOptimistic works in practice.

import { useOptimistic, useState, useTransition } from "react";
export function LikeButton() {
  const [likes, setLikes] = useState(0);
  const [error, setError] = useState("");
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (currentLikes, amount) => currentLikes + amount
  );
  const [isPending, startTransition] = useTransition();
  const handleLike = async () => {
    addOptimisticLike(1); // Optimistic update
    try {
      await fakeApiRequest(); // Simulate API call
      setLikes(likes + 1); // Confirm state after successful API call
      setError("");
    } catch (error) {
      // Handle error, optimistic state will automatically revert
      setError("Failed to like post");
    }
  };
  return (
    <div>
      <button onClick={() => startTransition(() => handleLike())}>
        Like ({optimisticLikes})
      </button>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}
function fakeApiRequest() {
  if (Math.random() < 0.3) {
    return new Promise((_, reject) =>
      setTimeout(() => reject(new Error("API request failed")), 1000)
    );
  }
  return new Promise((resolve) => setTimeout(resolve, 1000));
}

What’s Happening Here?

• Immediate UI feedback — The optimisticLikes count increases as soon as the button is clicked.
• Server confirmation — Once the server (or mock API) responds, the real state (likes) updates.
• Error handling — If something goes wrong, you can handle it gracefully (like reverting the optimistic count).
• The user never feels a delay — the UI reacts instantly.

You can use useOptimistic in many situations:

• Liking or unliking posts
• Adding comments
• Updating shopping cart items
• Submitting forms or feedback
• Reordering lists

With React 19’s useOptimistic, giving users fast and smooth feedback has never been easier. It eliminates the awkward waiting moments after a click and makes your app feel much more polished. Whether it’s a simple “Like” button or a complex form submission, optimistic updates are a small feature that makes a big difference in user experience.

To read more about What are the Key Features in React 19, refer to our blog What are the Key Features in React 19.