Skip to content

Javascript async/await in React Components

Again some notes from my recent React and Javascript/TypeScript learnings. I knew already how to use Promises by building method chains with .then() or .catch() to chain the asynchronous actions together. But as I am a fan of C#’s async and await and read that JS/TS does support them too, I liked to figure how to use them in my React apps so the code will get even cleaner as with the method chains.


When my React UI need data they have to request them from a REST-Server (API). Best practice here is to do this work asynchronous so the UI-Thread stays responsive.

When speaking of React UI I mean a React.Component using its standard methods that like componentDidMount(). This method is where one should load the server-data with regards to the React doc’s. This method is normally not marked async and therefore one can not use await. I guess this is why many React developers don’t use await but method chains.


How can I utilise await to simplify my asynchronous code in React apps?

First I implemented an async service-method which will be responsible to fetch data from the server (for example by using the fetch() API which is based on Promises).

The following code is my in-memory test-service which returns fixed values instead calling a real server. Hint: I used the Promise.resolve() function to return the fixed value right away.

async getEntities(): Promise {
    return Promise.resolve(entities);

Note the async keyword here and that I return a Promise. Side-note for C# developers: Javascript Promise is exactly that Taskis in C#.

Then I’ve changed my React Component’s componentDidMount() mount method to an async method by also using the async keyword:

export class ContactList extends React.Component {
    async componentDidMount() {
        const entities = await apiManager().contactService.getEntities();
        this.setState({ entities });

Please not that this way I can use await to await the result of my async function getEntities().

React seems to call this componentDidMount() even if it is async now.

Cool – eyy?

marcd View All

I love to write software. More then two decades ago I managed to make my hobby my full-time job so I spent more then 20 year writing professional software (I guess that makes me a "Senior Software Developer"). The last few years I spend most of the time developing in C#/.Net for all kind of windows-, web- and embedded-software.

In my free time I enjoy my family, taking photos and go diving in cold lakes and rivers in Switzerland.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: