Optimistic UI: Two Approaches for React Applications
Mike Codeur
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?