Dale Jefferson

Dale L. Jefferson

TypeScript, JavaScript, React, React Native

Async/Await with React Lifecycle methods

By Dale Jefferson. Published
JavaScript, Async Await, React, TypeScript

If you are like me you will also end up doing a lot of asynchronous work in componentWillMount/componentDidMount. This article will show you how to use Async/Await with React’s Lifecycle events. React’s lifecycle methods can return any value, including a promise.

Promise Version

componentDidMount() {
    .then((res) => res.json())
    .then((something) => this.setState({something}))

Async/Await Version

async componentDidMount() {
  const res = await fetch('https://example.com')
  const something = await res.json()


Note: if you do return a promise from the lifecycle methods it will be not be awaited.

I personally find the Async/Await version much easier to read.

Full example (React Native)

class AwesomeProject extends Component {
  state = {};

  setStateAsync(state) {
    return new Promise(resolve => {
      this.setState(state, resolve);

  async componentDidMount() {

    const res = await fetch("https://api.ipify.org?format=json");
    const {ip} = await res.json();

    await this.setStateAsync({ipAddress: ip});


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          My IP is {this.state.ipAddress || "Unknown"}