How to use async await with React componentDidMount() method?

Question

I want to use async/wait with React componentDidMount() method but I am getting await is a reserved word error. I also tried wrap the statement in Immediate Invoked Function but it didn't help.

async componentDidMount() {
  this.geoLocation.getAddress().then(location => {
    if (location.address != null && location.error != "undefined") {
      let fifteenMins = [];
      await this.getFifteenMinsData(y, x).then(
        data => {
          fifteenMins = data["forecasts"];
        }
      );
        console.log(fifteenMins);
    } 
  });
}

If I remove the await keyword, then I get null in console.log, but if I do console log right before fifteenMins = data["forecasts"]; then I get data.

Related question: Await is a reserved word error inside async function

what's your node version? – Dhaval Jardosh Aug 15 '18 at 16:07 — Dhaval Jardosh, Aug 15 '18 at 16:07
https://www.valentinog.com/blog/how-async-await-in-react/ – Dhaval Jardosh Aug 15 '18 at 16:08 — Dhaval Jardosh, Aug 15 '18 at 16:08

T.J. Crowder · Accepted Answer · 2019-04-23T15:29:27.490

async functions always return promises. Since componentDidMount isn't designed/documented as an async function, React doesn't do anything with the promise it returns. If you use an async function for this, be sure to wrap all its code in try/catch so that all errors are caught and you don't end up with an unhandled exception (which becomes an unhandled rejection).

The problem is that you're trying to use await in a non-async function: The callback you've passed then. When using async/await, you almost never use then. Instead:

async componentDidMount() {
  try {
    const location = await this.geoLocation.getAddress();
    if (location.address != null && location.error != "undefined") {
      const data = await this.getFifteenMinsData(y, x);
      let fifteenMins = data["forecasts"];
      console.log(fifteenMins);
    } 
  } catch (err) {
      // Do something with the fact an error occurred
  }
}

Or avoiding returning a promise from componentDidMount by using an IIFE:

componentDidMount() {
  (async () => {
    const location = await this.geoLocation.getAddress();
    if (location.address != null && location.error != "undefined") {
      const data = await this.getFifteenMinsData(y, x);
      let fifteenMins = data["forecasts"];
      console.log(fifteenMins);
    } 
  })()
  .catch(error => {
    // Do something with the fact an error occurred
  });
}

Or don't use an async function at all (but async functions are really handy):

componentDidMount() {
  this.geoLocation.getAddress()
    .then(location => {
      if (location.address != null && location.error != "undefined") {
        return this.getFifteenMinsData(y, x)
          .then(data => {
            let fifteenMins = data["forecasts"];
            console.log(fifteenMins);
          });
      } 
    })
    .catch(error => {
      // Do something with the fact an error occurred
    });
}

Side note: This pair of lines:

const data = await this.getFifteenMinsData(y, x);
let fifteenMins = data["forecasts"];

can be written like this if you like, destructuring the result into the fifteenMins variable:

let {fifteenMins: forecasts} = await this.getFifteenMinsData(y, x);

Similarly, if you did decide to go with the non-async version, you can do that in the parameter list of the then handler:

.then(({fifteenMins: forecasts}) => {
  console.log(fifteenMins);
});

For the sake of future people who google into this. Correct me if I'm wrong but while it is true that the promise isn't used there's no harm in adding `async` to `componentDidMount()` to simply enable the use of async await without using a IFEE (aka it's less typing). The trade off is it might be a little less clear for newer developers reading the code for the first time. — ksrb, Apr 23 '19 at 14:48

Atul · Answer 2 · 2018-08-15T16:13:58.243

1

if you are using await you dont have to use then

let data=  await this.getFifteenMinsData(y, x);

edit

let location = await this.geoLocation.getAddress();
  //do your stuff
  if (location.address != null && location.error != "undefined") {
    let fifteenMins = [];
    let data = await this.getFifteenMinsData(y, x);
    fifteenMins = data["forecasts"];
      console.log(fifteenMins);
  }

edited Aug 15 '18 at 16:13

answered Aug 15 '18 at 16:07

Atul

420
2
10

I still get the same error. Which says, await is reserved word. – Maihan Nijat Aug 15 '18 at 16:10
let location = await this.geoLocation.getAddress(); //do your stuff if (location.address != null && location.error != "undefined") { let fifteenMins = []; let data = await this.getFifteenMinsData(y, x); fifteenMins = data["forecasts"]; console.log(fifteenMins); } – Atul Aug 15 '18 at 16:13

How to use async await with React componentDidMount() method?

2 Answers2

Linked