We should still do optimistic UI

Optimistic UI was a neat thing that came out of all the state management tools that were popular when React was taking off, before hooks and useReducer became a mainstay of web development. The idea is that when API calls are slow, update your local app state as if they succeeded quickly. If it does succeed, you app looks faster. If they fail, no biggy - rollback the state and pop up an error state. Because we can typically expect API calls to be successful, this was a great strategy to hide the slowness of the infrastructure behind the curtain of virtual DOM. At the time (for me anyway) you had to write your own data fetching and state management abstractions so you could roll optimistic UI into your artisan solution and do it automatically. Now we have the convenience of RTK and tanstack query to manage all the API state, and very rarely do you have to manually interact with the query state - but you still should in some cases. If your app uses modals for most user-initiated transitions, you probably want to manually update your queryState optimistically in place of just invalidating your cache. In our app, it takes 20+ seconds to update your billing plan on the backend and simply invalidating the cache is much more janky than just manually setting the querystate with the new billing details. Don't forget our old friend, Optimistic UI!

Mar 31, 2025 - 22:01

Optimistic UI was a neat thing that came out of all the state management tools that were popular when React was taking off, before hooks and useReducer became a mainstay of web development. The idea is that when API calls are slow, update your local app state as if they succeeded quickly. If it does succeed, you app looks faster. If they fail, no biggy - rollback the state and pop up an error state. Because we can typically expect API calls to be successful, this was a great strategy to hide the slowness of the infrastructure behind the curtain of virtual DOM. At the time (for me anyway) you had to write your own data fetching and state management abstractions so you could roll optimistic UI into your artisan solution and do it automatically. Now we have the convenience of RTK and tanstack query to manage all the API state, and very rarely do you have to manually interact with the query state - but you still should in some cases. If your app uses modals for most user-initiated transitions, you probably want to manually update your queryState optimistically in place of just invalidating your cache. In our app, it takes 20+ seconds to update your billing plan on the backend and simply invalidating the cache is much more janky than just manually setting the querystate with the new billing details. Don't forget our old friend, Optimistic UI!