An Overview of Optimistic Updates for React Hooks

[00:00 - 00:24] Hi, welcome to the next module. In the previous one, we implemented the use comments hook, we tested it, and we saw that it works as expected. However, every time a user has a comment, we refresh all of the comments from the database. We're making two API requests. The first one is add comment mutation, and the second one is to fetch the comments again.

[00:25 - 01:48] The latter seems quite redundant, as we already have all the information about the new comment, and we already have the previous state. Also, making an additional call puts the comment section into a loading state. In case there are many comments, it may feel slow . Hence, it's not the best user experience. Maybe we don't have to make the call to refresh the comments. We have the list of the previous comments, as well as the information about the new one. Could we push the comment to local comment state, and don't call fetch comments function? We can. We'd only need to handle the add comment mutation error, but we can get rid of fetch comments call and enhance the experience. That's what we're going to do in this lesson. Introducing optimistic updates. In an optimistic update, the UI assumes that the change was successful, and displays the new state before receiving information from the API. When API returns a confirmation that the call was successful, the UI stays the same. We don't have to do anything, unless API gives some additional info. If there was an error, we need to handle it on the front end and revert to the change. So, let's implement optimistic updates. We have to go back to our code editor and open the use comments.ts file.

[01:49 - 03:15] We'll extend the comment type and add a status field. The status will be either adding, added, or failed. Then we'll go to the add comment function and we'll change it a little bit. We'll remove the fetch comments call and instead we'll set a new state there. That means when user is adding a new comment, we'll locally update the comment state by using the set comments function and we'll prepend the comments with the new comment information. Then we have to handle the fetch call result. If the request is successful, we 'll change the status to added. Otherwise, we'll set it to failed. The last but not least, we'll display the status in the comments section. I'll add this information next to the author name and date. Now let's open our application in a browser and see how it works . We can see that for a new comment, it quickly displays adding status and then after a few seconds it's changed to added. That was a very quick lesson. We improved our hook with just a few lines of code but the user experience is much much better now. Feel free to change the size of how the status is being displayed. For example, you could have a different background to strike it more from the rest. In the next lesson, we'll add pagination to the comment section. See you soon.