Optimistic UI: Making Apps Feel Instant

What is Optimistic UI?

Optimistic UI is a pattern where the UI updates immediately, before the server confirms the action. If the server request fails, we roll back.

// Traditional approach
async function createNote() {
  const note = await api.createNote(); // Wait...
  setNotes([...notes, note]); // Then update UI
}
// Optimistic approach
async function createNote() {
  const tempNote = { id: 'temp', title: 'New Note' };
  setNotes([...notes, tempNote]); // Update UI immediately
try {
    const note = await api.createNote();
    setNotes(notes.map(n => n.id === 'temp' ? note : n));
  } catch {
    setNotes(notes.filter(n => n.id !== 'temp')); // Rollback
  }
}

Where We Use It

• Creating notes - New tab appears instantly
• Deleting notes - Tab closes immediately
• Saving content - No "Saving..." indicator needed

The Perceived Speed Difference

Action	Traditional	Optimistic

Create note	~300ms	~0ms
Delete note	~200ms	~0ms

The actual time is the same. But the perceived time is dramatically different.

Implementation Tips

• Use temporary IDs - Replace with real IDs after server response
• Keep rollback state - Store previous state for recovery
• Show subtle feedback - A brief sync indicator for peace of mind

Conclusion

Users don't care about network latency. They care about how fast the app feels. Optimistic UI is the bridge between reality and expectation.