Is using async componentDidMount() good?

Question

Is using componentDidMount() as an async function good practice in React Native or should I avoid it?

I need to get some info from AsyncStorage when the component mounts, but the only way I know to make that possible is to make the componentDidMount() function async.

async componentDidMount() {
    let auth = await this.getAuth();
    if (auth) 
        this.checkAuth(auth);
}

Is there any problem with that and are there any other solutions to this problem?

Answer 1

Your code is fine and very readable to me. See this Dale Jefferson's article where he shows an async componentDidMount example and looks really good as well.

But some people would say that a person reading the code may assume that React does something with the returned promise.

So the interpretation of this code and if it is a good practice or not is very personal.

If you want another solution, you could use promises. For example:

componentDidMount() {
    fetch(this.getAuth())
      .then(auth => {
          if (auth) this.checkAuth(auth)
      })
}

Answer 2

I think it's fine as long as you know what you're doing. But it can be confusing because async componentDidMount() can still be running after componentWillUnmount has run and the component has unmounted.

You may also want to start both synchronous and asynchronous tasks inside componentDidMount. If componentDidMount was async, you would have to put all the synchronous code before the first await. It might not be obvious to someone that the code before the first await runs synchronously. In this case, I would probably keep componentDidMount synchronous but have it call sync and async methods.

Whether you choose async componentDidMount() vs sync componentDidMount() calling async methods, you have to make sure you clean up any listeners or async methods that may still be running when the component unmounts.

Answer 3

When you use componentDidMount without async keyword, the doc say this:

You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen.

If you use async componentDidMount you will loose this ability: another render will happen AFTER the browser update the screen. But imo, if you are thinking about using async, such as fetching data, you can not avoid the browser will update the screen twice. In another world, it is not possible to PAUSE componentDidMount before browser update the screen

Answer 4

Update:

(My build: React 16, Webpack 4, Babel 7):

When using Babel 7 you'll discover:

Using this pattern...

async componentDidMount() {
    try {
        const res = await fetch(config.discover.url);
        const data = await res.json();
        console.log(data);
    } catch(e) {
        console.error(e);
    }
}

you will run into the following error...

Uncaught ReferenceError: regeneratorRuntime is not defined

In this case you will need to install babel-plugin-transform-runtime

https://babeljs.io/docs/en/babel-plugin-transform-runtime.html

If for some reason you do not wish to install the above package (babel-plugin-transform-runtime) then you will want to stick to the Promise pattern...

componentDidMount() {
    fetch(config.discover.url)
    .then(res => res.json())
    .then(data => {
        console.log(data);
    })
    .catch(err => console.error(err));
}

Answer 5

Let's start by pointing out the differences and determining how it could cause troubles.

Here is the code of async and "sync" componentDidMount() life-cycle method:

// This is typescript code
componentDidMount(): void { /* do something */ }

async componentDidMount(): Promise<void> {
    /* do something */
    /* You can use "await" here */
}

By looking at the code, I can point out the following differences:

1. The async keywords: In typescript, this is merely a code marker. It does 2 things:
   • Force the return type to be Promise<void> instead of void. If you explicitly specify the return type to be non-promise (ex: void), typescript will spit an error at you.
   • Allow you to use await keywords inside the method.
2. The return type is changed from void to Promise<void>
   • It means you can now do this:
     async someMethod(): Promise<void> { await componendDidMount(); }

3. You can now use await keyword inside the method and temporarily pause its execution. Like this:

   async componentDidMount(): Promise<void> {
       const users = await axios.get<string>("http://localhost:9001/users");
       const questions = await axios.get<string>("http://localhost:9001/questions");
   
       // Sleep for 10 seconds
       await new Promise(resolve => { setTimeout(resolve, 10000); });
   
       // This line of code will be executed after 10+ seconds
       this.setState({users, questions});
       return Promise.resolve();
   }
   

Now, how could they cause troubles?

1. The async keyword is absolutely harmless.

2. I cannot imagine any situation in which you need to make a call to the componentDidMount() method so the return type Promise<void> is harmless too.

   Calling to a method having return type of Promise<void> without await keyword will make no difference from calling one having return type of void.

3. Since there is no life-cycle methods after componentDidMount() delaying its execution seems pretty safe. But there is a gotcha.

   Let's say, the above this.setState({users, questions}); would be executed after 10 seconds. In the middle of the delaying time, another ...

   this.setState({users: newerUsers, questions: newerQuestions});

   ... were successfully executed and the DOM were updated. The result were visible to users. The clock continued ticking and 10 seconds elapsed. The delayed this.setState(...) would now execute and the DOM would be updated again, this time with old users and old questions. The result would also be visible to users.

=> It is pretty safe (I'm not sure about 100%) to use async with componendDidMount() method. I'm a big fan of it and so far I haven't encountered any issues which give me too much headache.