Click. Done. (Then Network)

When you like a tweet, does it wait for the server? No. The heart turns red instantly.
If your app shows a spinner for a boolean toggle, you are failing your users. React 19 gives us a primitive to fix this.

The Old Way: You have local state isLiked. When clicked, you set it to true. Then you fire the API. If it fails, you set it back to false. Managing three states (true, false, loading) manually is pain.

The New Way: useOptimistic lets you declare what the UI should look like while an async action is pending. It handles the switch, the display, and the rollback automatically.

02. Understanding useOptimistic

const [optimisticState, addOptimistic] = useOptimistic(
  state, // Source of Truth (Server Data)
  // Reducer: How to merge optimistic updates
  (currentState, optimisticValue) => {
     return [...currentState, optimisticValue];
  }
);

It takes two main arguments: the current real state (usually from props/server) and a reducer function.

When you call addOptimistic, React immediately re-renders with the result of your reducer. Once the async action finishes (and the new real state arrives via props), React automatically discards the optimistic state and uses the real one.

05. Share the Knowledge

🚀

Did You Know?

Instagram was one of the first apps to popularize "Optimistic UI" at scale. They upload photos in the background while showing them in your feed immediately, making the app feel "impossibly fast."

import React, { useOptimistic, useState, useRef } from 'react'; // 🧪 Message Component export default function ChatOptimistic() { const [messages, setMessages] = useState([ { id: 1, text: 'Hello!', sending: false }, { id: 2, text: 'How are you?', sending: false } ]); // 1. Setup Optimistic State // When we add a message optimistically, we flag it sending: true const [optimisticMessages, addOptimisticMessage] = useOptimistic( messages, (state, newMessage) => [ ...state, { ...newMessage, sending: true, id: Math.random() } ] ); async function sendMessage(formData) { const text = formData.get('message'); // 2. Trigger Optimistic Update immediately addOptimisticMessage({ text }); // 3. Simulate Server Action Delay await new Promise(resolve => setTimeout(resolve, 1500)); // 4. Update Real State (Server Response) setMessages(prev => [...prev, { id: Date.now(), text, sending: false }]); } return ( <div className="p-6 bg-gray-900 text-white min-h-[500px] border border-gray-800 rounded-xl flex flex-col font-sans"> <h2 className="text-2xl font-bold mb-6 text-green-400">Live Chat (Optimistic)</h2> <div className="flex-1 space-y-4 mb-6 overflow-y-auto"> {optimisticMessages.map((msg, i) => ( <div key={i} className={`p-3 rounded-lg max-w-[80%] ${ msg.sending ? 'bg-green-900/30 border border-green-500/50 text-green-200 ml-auto opacity-70 italic' : 'bg-gray-800 text-white ml-auto' }`} > {msg.text} {msg.sending && <span className="ml-2 text-xs"> (Sending...)</span>} </div> ))} </div> <form action={sendMessage} className="flex gap-2 border-t border-gray-800 pt-4"> <input name="message" placeholder="Type a message..." className="flex-1 bg-gray-950 border border-gray-700 rounded-lg px-4 py-3 outline-none focus:border-green-500" required autoComplete="off" // Reset form hack for demo ref={e => e && e.form.reset} /> <button className="bg-green-600 hover:bg-green-500 text-white font-bold px-6 rounded-lg transition-colors"> Send </button> </form> <p className="mt-4 text-xs text-gray-500 text-center"> Note: When you hit Send, the message appears INSTANTLY. The "Sending..." label simulates waiting for server confirmation (1.5s delay). </p> </div> ); }

Stuck on a Complex Codebase or Preparing for Senior Dev Interviews?

Whether you need urgent sprint job support to fix stubborn bugs in production, architectural guidance for your enterprise app, or targeted 1:1 mentorship to land a senior role — get real-time screen-share assistance.

1:1 Deep-Dive Mentorship

Weekly 1-on-1 live coding, design pattern reviews, and customized roadmaps in React, Node, TS, Playwright, and Mongo.

Live IT Job & Sprint Support

Urgent on-demand screen-share assistance to unblock sprint deliverables, debug memory leaks, and optimize slow queries.

FAANG Mock Coding Rounds

Simulated machine coding rounds with line-by-line code reviews, rubric scoring, and Google X-Y-Z resume optimization.

Mastering useOptimistic: Creating 'Lag-Free' UX for Global Applications