Why Optimistic state updates in NextJS? - Purpose & Use Cases

The Big Idea

What if your app could feel instant even when the server is slow?

The Scenario

Imagine you click a button to like a post, but you have to wait for the server to confirm before you see the like count change.

This delay makes the app feel slow and unresponsive.

The Problem

Waiting for the server response before updating the UI causes frustration.

Users might click multiple times or think the app is broken.

Manually handling these delays and errors is tricky and messy.

The Solution

Optimistic state updates immediately show the new like count before the server confirms.

This makes the app feel fast and smooth.

If the server later rejects the change, the UI can fix itself automatically.

Before vs After

✗ Before

await fetch('/like'); updateUI();

✓ After

updateUI(); await fetch('/like').catch(() => revertUI());

What It Enables

It enables apps to feel instant and responsive, improving user happiness and trust.

Real Life Example

When you send a chat message, it appears right away instead of waiting for the server to save it.

Key Takeaways

Manual waiting for server slows down UI updates.

Optimistic updates show changes instantly.

They handle errors gracefully by reverting if needed.