Optimistic UI

Optimistic UI makes your app feel snappy by giving immediate feedback, even when actions take a bit longer. This is especially useful when you’re waiting for a network response. Optimistic updates can make a UI feel more responsive and improve the user experience. In this chapter, you will learn how to add optimistic UI updates with Remix.

This chapter is split into two sections:

• Considering optimistic UI
• Adding optimistic UI updates in Remix

First, we will discuss the trade-offs of using optimistic UI updates and investigate the complexity and risks of client/server state synchronizations and rollbacks. Next, we will review the current state of BeeRich and investigate which mutations to enhance with optimistic UI updates. We will then add optimistic UI updates where it makes sense using Remix’s primitives.

After reading this chapter, you will know how to evaluate the usage of optimistic UIs. You will have also practiced implementing...

Technical requirements

You can find the code for this chapter here: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/11-optimistic-ui.

BeeRich has grown quite a bit. Now is a good time to refactor the code. Before starting with this chapter, we want to update the current code. We will also enhance our form validation and parsing using zod. Follow the step-by-step guide in the README.md file to prepare BeeRich for the upcoming advanced topics.

Considering optimistic UI

The source of truth of a web application is usually stored remotely in a database. We can only be sure that a mutation succeeded after updating the database and receiving confirmation from the server. The UI response to a mutation is thereby delayed until we hear back from the server.

Optimistic UI is a pattern that’s used to provide instant feedback to users while waiting for an execution to resolve. When updating the UI optimistically, we apply a UI update before receiving the definitive response from the server. Most of the time, our mutations succeed, so why wait for a server response? In this section, we will discuss some trade-offs of optimistic UI updates.

Communicating rollbacks

Updating the UI optimistically speeds up the perceived response time when the optimistic state aligns with the server response. When the optimistic update does not align with the server response, then optimistic updates need to be rolled back or corrected. This...

Adding optimistic UI updates in Remix

In this section, we will review our BeeRich application and discuss which user actions would profit the most from adding optimistic UI updates. Then, we will go ahead and make the required code changes.

Creating an expense

Run BeeRich locally by executing npm run dev in the project’s root and navigate to the expense overview page (http://localhost:3000/dashboard/expenses). Now, create a new expense.

Notice that after submitting the expense creation form, we are redirected to the expense details page. The URL now includes the new expense identifier. After the redirect, we have access to the newly created expense loader data, including the expense identifier. All further updates to the expense require the expense identifier.

Adding optimistic UI updates to the expense creation form may become quite complicated. One way to achieve this would be to optimistically update the look and feel of the creation form so that it looks like...

Summary

In this chapter, you learned how to add optimistic UI updates in Remix. You were introduced to the trade offs of optimistic UI, such as the increased complexity of client-side logic and the necessity of user feedback in case of rollbacks.

Remix’s loader revalidation is a great starting point for synchronizing the UI with the server state. You now understand that Remix’s loader revalidation enables us to avoid custom client-server state synchronization and lets us avoid stale states. When relying on the loader data, we get rollbacks out of the box. After each mutation, we receive the latest loader data, and our UI updates automatically.

It is still worth communicating why a mutation failed. With or without optimistic updates, it is important to display an error message to the user. For optimistic updates, it might also make sense to highlight the rolled-back data visually. Remix’s ErrorBoundary component is a great starting point for recovering from...

Further reading

You can find more information about how to implement optimistic UI in the Remix documentation: https://remix.run/docs/en/2/discussion/pending-ui.

There is also a great Remix Single video about optimistic UI on the Remix YouTube channel: https://www.youtube.com/watch?v=EdB_nj01C80.