Optimistic UI: Two Approaches for React Applications

Is your app feeling slow? ⏳
Have you considered implementing an Optimistic UI approach?

The idea is simple: Be optimistic.

No need to wait for the server’s response (and suffer its latency) to update your component’s state.

Here are some concrete examples:

• A user posts a comment? It appears instantly in the list.
• Adding a new row to your table? It shows up immediately.

The server’s response? We don’t care! We assume there’s a 99.9% chance it’ll work correctly.
And if there’s an error? No worries, we simply roll back to the previous state.

How can you do this?

• With TanStack Query, you can implement this approach in an advanced way using local cache management.
• Looking for something simpler? With React 19, the useOptimistic hook allows you to achieve this behavior directly.

🚀 Combined with Server Actions, it’s incredibly powerful. (All of this is covered in Next Mastery.)

Do you already use this approach to make your interfaces more responsive?