The Magic of Optimistic UI Updates with React and Redux
By: Gokul Suresh
Tags: Tailwind, Js, Reactjs, Redux

Hey there! Let’s talk about optimistic UI updates. The whole point of this discussion is to bring clarity to the bigger picture — why do we need optimistic UI updates and how is it done.

What are optimistic UI updates?

An optimistic UI update is an update in the user interface showing the final result even before the change requested to the server has returned a success. In other words, the UI changes to the result even before receiving a response from the server.

Yes, you read it right. It’s simple! Optimistic UI makes the app feel faster, thus impacting the user’s happiness(or in other words, customer’s satisfaction).

You can find the concept being used in everyday applications such as WhatsApp, Facebook, Instagram, etc.

But what if the server returns an error?

That is where progress indicators come to play. When the user initiates a change, we use a loader or spinner to indicate the status of the ongoing process.

So, how is it done?

Implementation

We will try and build a rating component using React and Redux to understand this concept.

Note: We’re Using TailwindCSS for styling.

Building the component

So first, we will make a rating component with 5 Stars. This component should accept three things:

The initial state of the component

An updater function to update the value

And a status indication variable

We can also have a React state for indicating a hover action on the stars.

As we have access to the status indication variable, we can use react-icons to get a spinner icon and render its styles according to the variable. If the status is loading, we can display the spinner and animate it.

Otherwise, it stays hidden. On click of any star a function is triggered that passes the selected star’s value to the updater function (minding that array indexing starts from 0).

2. Building the Store, Reducer, and Actions.

Actions : In Redux, actions are JavaScript objects that describe the event. It usually has a type and a payload property.

: In Redux, actions are JavaScript objects that describe the event. It usually has a type and a payload property. Reducers : Reducers are functions that take the current state and an action as arguments and return a new state result.

: Reducers are functions that take the current state and an action as arguments and return a new state result. Store : The Redux store brings together the state, actions, and reducers that make up the app. The store is responsible for updating the state, dispatching an action, etc.

: The Redux store brings together the state, actions, and reducers that make up the app. The store is responsible for updating the state, dispatching an action, etc. Middleware: A Redux middleware provides an extension point between dispatching an action and the moment it reaches the reducer. Redux-Thunk is a middleware that helps us write async logic that interacts with the store.

We can define our initial state as:

The Reducer Returns a new state according to the action type.

Now we can create the actions

The next move is to create a thunk action so that we can update the server with our data.

Note: I have used setTimeout to mimic the delay.

First, we request a change so that the loading spinner starts. If the requested change is successful, then turn the loader off and update the value. Otherwise, revert the UI to the previous state.

We can also use this for already existing applications by just creating a state for loading and writing a thunk action to update it.

So, At the start of a request the thunk action should set the loader variable true and process the request if it is completed successfully the loader is set to false and if not, the value will be reverted and the loader will be set to false.