Async await on component did mount

Question

This is my componentDidMount method. I want to set the state of the current user and then call the function when that user is set. How can I do this?

  componentDidMount = () => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({user: user})
      }
    });
    this.props.retrieveMatches(this.state.user.uid)
  }

I've tried using async/await but im not using it correctly here:

  async componentDidMount = () => {
    await firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({user: user})
      }
    });
    this.props.retrieveMatches(this.state.user.uid)
  }

basically I want to await for lines 2-6 before calling the props function on line 7

score 4 · Accepted Answer · answered Jan 29 '18 at 14:32

you need to use .setState()'s callback function:

componentDidMount = () => {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.setState({user: user}, () => { 
        this.props.retrieveMatches(this.state.user.uid); 
      })
    }
  });
}

greetings

score 2 · Answer 2 · answered Jan 29 '18 at 14:33

I understand the confusion but that line uses callbacks and not Promises so you're not supposed to use async/await

it should be:

componentDidMount = () => {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.setState({user: user}, () => { this.props.retrieveMatches(this.state.user.uid); })
    }
  });
}

You can use async/await to replace promises then and catch calls

This

promise.then((result) => {...}).catch((error) => {});

would become

try {
  const result = await promise();
} catch (error) {
  // do stuff
}

score 0 · Answer 3 · answered Jan 29 '18 at 14:47

0

you shouldn't make a react lifecycle method async.

do an async await method externally as a helper function then import it:

in a helper file:

async asynchronousFn() {
    const result = await (your asynchronous code)
    return result
}

in the component:

componentDidMount() {
    asynchronousfn().then(result => this.setState({ statekey: result }));
}

answered Jan 29 '18 at 14:47

Ben Hart

157
10

remember that async functions return a promise, and you don't want to stick a promise in state, you want to stick the result in state. – Ben Hart Jan 29 '18 at 14:49
Hello, Ben hi is not really making the lifecycle method a async look this short post https://medium.com/front-end-hacking/async-await-with-react-lifecycle-methods-802e7760d802 what I see here is that for future use your code is more clean – Angel Jan 29 '18 at 14:55

Angel · Answer 4 · 2018-01-29T14:56:35.740

With the callBack function on the setState API you will fix your problem. In the link is the documentation of setState so you can see the setState and the arguments it accept.

I don't think you need a Async of Promise at this point as you see the onAuthStateChanged return a function, not a promise

componentDidMount = () => {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.setState({user: user}, () => { this.props.retrieveMatches(this.state.user.uid); 
    })
   }
 });  
}

Async await on component did mount

4 Answers4