ClearPeople logo

How to Handle Asynchronous Requests Gracefully in React

20 March 2020
  

A dynamic React component which requires data to be fetched will have a brief period when there is no data to show.

 

This is a very common scenario and it is important to handle it properly. 

Lets consider the choices a developer can make.

Display nothing until the request is complete

This is the easiest thing to do. Show nothing unless the data exists.

Consider a component that has a state object containing an array property like this:

 

How to Handle Asynchronous Requests Gracefully in React 1


The items must be requested from an API resource, so they are initially empty.


The componentDidMount function contains the call to a separate asynchronous function.

 

How to Handle Asynchronous Requests Gracefully in React 2


The render function looks like this:

 

How to Handle Asynchronous Requests Gracefully in React 3


This method will show an empty space for a moment until the request has completed and the state is updated with the new results.


This delay of the render can cause confusion for the user as the user is not aware that the component is loading.


It not very graceful.

 

Display a loading message

To improve upon the first method, the next best thing to do is to display a loading message until the request has completed.


For this we can add another property to the state object called 'isLoading'.

 

How to Handle Asynchronous Requests Gracefully in React 4


This value is initially 'true' until the request has completed.

 

How to Handle Asynchronous Requests Gracefully in React 5


Our render function now has a conditional statement which will render a loading message.

 

How to Handle Asynchronous Requests Gracefully in React 6


Now the user is aware that the component is loading. No more confusion... That is unless the API request has failed.


If the request fails, then the user cannot tell if there has been an error with the request or if there are simply no results to show.

 

Handle all stages of the request

To combat this problem, we need to identify the 4 stages of a dynamic component:

  • Idle
  • Loading
  • Success
  • Fail


At the beginning of the dynamic component lifecycle, before any request is made, it is in the 'idle' state.


Once the request is made to fetch the data, it is changed to the 'loading' state. Then depending on the response, it will change to the 'success' or 'fail' state. 


To implement these stages, we need to make a change to the state object:

 

How to Handle Asynchronous Requests Gracefully in React 7


Now we are using the 'loadState' property to identify the stage of the request process. We must change the componentDidMount function to reflect the 'loadState' values.

 

How to Handle Asynchronous Requests Gracefully in React 8


Our render function can be changed to this:

 

How to Handle Asynchronous Requests Gracefully in React 9


The render function now handles all stages of the dynamic request gracefully and will even show an error message if the request has failed.

Author bio

Ian Jackson

Ian Jackson

I help bring our designs to life on the front end while collaborating closely with the UX team. Always ready to tackle any project head on no matter how daunting, I like to keep on top of all things new and exciting in the world of web development.

View all articles by this author

Sign up to our ClearThought newsletter

Get inspired and learn something new by subscribing to our FREE newsletter. It’s full of ClearPeople's thought-leadership whitepapers, blogs, events, and much more. We promise to not use your email for spam.