Throughout all of my React projects, I find myself using Async & Await for every external data request. In this post, I want to highlight the general benefits of using this syntax while also demonstrating how I use it in Reactjs.
Before we implement Async + Await, it is important to identify which problem it solves. To do this we must understand Promises.
This makes perfect sense – we read from top to bottom so we would naturally expect code to run in a similar sequential order. And that is exactly how synchronous code runs.
Avoids running in sequence bottleneck
When executing a function, don’t wait for it to finish before running the next line.
Asynchronous code does not want to wait for one thing to finish.
When a blocking operation is needed (e.g HTTP request), the request is started, and the code keeps running without blocking for the result.
When the response is ready, the code will stop what its doing and revert back to the code that was intended to run once the request was finished.
Once the basic concept of these two types of actions is understood, the benefits of Async + Await becomes more clear.
Why use it?
ES7’s Async + Await allows the developer to write more concise asynchronous code.
When implemented correctly, it can do the following:
Make code more readable
Better describe when a asynchronous action begins + ends
Reduce the amount of code used overall for asynchronous actions
Showing the differences
It is important to remember that a Promise and Async + Await both still create synchronous code.
In a simple React application, I find the most common usage of async and await is in the component lifecycle hook componentDidMount()
In more complex projects, or perhaps an implementation with Redux (a state manager for React), these async requests usually take place in an external store where many calls are needed.
This is a basic implementation of a Promise in a react component. Notice we specify .then() , whatever is put inside here will on occur after the request for data has finished. In this case, we set the state of the component with the retrieved data.
Using .then() ensures asynchronicity. It doesn’t matter if the data is returned now or later, whenever it does return all the code in the .then() will be run.
Now, how does this differ from Async + Await? Well, essentially it is the exact same thing, just with a reduced amount of code written. And an easier way to understand when reading it.
First wrap componentDidMount() with the async keyword:
This is actually more efficient then using 3 or 4 awaits in a row.
This is definitely something to be aware of when waiting for multiple data sets to be successfully retrieved in a larger Reactjs project.
However, if looking for a combination of await and Promise.all the following exists:
let [foo, bar] = await Promise.all([getData(), getDataTwo()]);
For a deeper understanding of Promises I’d suggest reading Daniel Brain’s post.
Fundamentally, async + await is no different from Promises. But rather, it is a different way of writing them. We can’t get away from the fact that a deep understanding of Promises is still required when debugging code like this.
However, I find that it’s descriptive use of the words async and await enable the developer to write Promise based callback in a more understandable way.
Specifically, in my React projects, it has helped clean up all code that makes external request to retrieve data. And perhaps most importantly, any developer that might look at this code in the future will have a much better breakdown of which requests are asynchronous vs synchronous .