There’s a lot of misinformation on how to use async/await with React and Redux. In general, React does not support async/await, but you can make it work with some caveats. In particular, render() cannot be async, but React suspense may change this. For example, the below minimal example with Node.js 8.9.4, React 16.4.1, and React-DOM 16.4.1 will throw an error.

const { Component, createElement } = require('react');
const { renderToString } = require('react-dom/server');

class MyComponent extends Component {
  async render() {
    return null;
  }
}

// Throws "Invariant Violation: Objects are not valid as a React child
// (found: [object Promise])"
assert.throws(function() {
  renderToString(createElement(MyComponent));
}, /Objects are not valid as a React child/);

You can make lifecycle methods async, like componentWillMount(), in some cases. However, async componentWillMount() doesn’t work at all with server-side rendering.

class MyComponent extends Component {
  async componentWillMount() {
    this.setState({ text: 'Before' });
    await new Promise(resolve => setImmediate(resolve));
    this.setState({ text: 'After' });
  }

  render() {
    return createElement('h1', null, this.state.text);
  }
}

// Prints '<h1 data-reactroot="">Before</h1>'
// Note React does **not** wait for the `componentWillMount()` promise
// to settle.
// Also prints "Warning: setState(...): Can only update a
// mounting component."
console.log(renderToString(createElement(MyComponent)));

#redux