Optimistic Updates in Frontend Applications

If you had to pick a key determinant for your satisfaction on a web page, speed would undoubtedly be in the top two of all your arguments. You’re not alone either, more than half of web users worldwide require a website’s load time to be under three seconds or they lose interest.

Beyond load times, a page’s responsiveness also contributes to the perception of speed for users. However, due to server round trip times, network glitches, and sometimes the processing power of the machine, response times can be wonky. But nobody wants to listen to technical jargon, they just need their technology to work.

To fix this issue, front-end developers turned to optimistic updates. You know when you like an image on Instagram, and the heart appears even when your network is down? Those are optimistic updates. Typically, the User interface (UI) waits until the server confirms an action before reflecting an update, however, optimistic updates bypass that sequence.

In one line, Optimistic updates is a tool used to enhance user experience by initiating UI changes without backend validation.

This article looks to dive deeper into optimistic updates. How do they work? Why use them? What use cases render them ineffective?

Why do we use optimistic updates?

Why embrace this tool, you might ask?

The advantages are persuasive. As mentioned earlier in this article, the tool updates the UI instantly, creating a smoother and more responsive user experience, eliminating delays, and keeping users engaged. It also takes away the wait time for server confirmation making it possible for faster interaction, and improving the user's satisfaction.

Optimistic updates can be applied in various functions like common actions; liking a post, updating a profile picture, or adding an item to a cart. Further, offline editing allows users to make changes without access to the internet, and later sync when they're back online. An example of this is Google Docs.

How optimistic updates work

Once an action is implemented, the tool identifies it and triggers an update. Next, it updates the local state, modifying the local UI structure as if the change were successful. A request is sent to the server to communicate the desired change, which in turn sends back a response of either Success or Failure.

User initiates action (clicks like) -> UI updates immediately (instantly reflects 1Like) -> Server communication (request is sent to the server notifying it of the action) -> Server response (server processes the request and sends a response, success or failure).

If it's successful then the optimistic update is validated, if it's a failure then the optimistic update is reverted (the like indicator is removed.).

Learn more here

When not to use optimistic updates

While Optimistic Update is a good tool, it's only ideal for frequent, low-risk action where the server validation is simple and quick. Optimistic updates require careful implementation. It's not to be used in transactions where failed updates could have significant backfires (e.g. financial transactions). Avoid using them when maintaining strict data integrity across multiple users.

Optimistic updates are valuable tools in a developer toolkit. By understanding their functions and importance, you have an advantage in using them to create responsive user experiences that leave your users satisfied.