Optimistic Mutation

There’s still one more performance improvement we can make. Instead of waiting for a response from the server, we can speculatively update the UI as if the request has already succeeded, thus improving the responsiveness of our application. This is called an optimistic mutation, and we’ll learn how to use it in this lesson.

As we explore this option, we’ll also uncover a potential performance issue with our application, and then we’ll see how this advanced technique will allow us to fix it.

What are we trying to improve?

To learn how to use optimistic mutations, we’ll try to improve the performance of the upvoting feature, but the problem is that our browser is running on the same computer the application is running on. So, no matter how we implement our application, it will seem fast on a local machine! The issue that we’re trying to fix is only visible on a slower network connection.

So, before we learn about optimistic mutations, we need to emulate a slow connection to see how our application works for a real user. Fortunately, this is easy to do using the developer tools in the browser, which allows us to slow down the responses received by the browser to simulate a slow network. For this lesson, let’s set it so that it’s roughly the same as a slow 3G connection in order to demonstrate the issue more accurately.