Usage cases for async generator render functions: https://github.com/reactjs/rfcs/issues/29

async-render.md

Load data on client and server:

async function * MyComponent() {
  yield (<div>Loading...</div>);
  const users = await fetch('/users');
  yield () =>
    <div>
      <UserList users={users} />
      <button onClick={this.props.onClick}>{this.props.buttonLabel}</button>
    </div>;
}

Load data in steps:

async function * MyComponent() {
  yield (<div>Loading...</div>);
  let users = await fetch('/users/1');
  yield () => <UserList users={users} />;
  users = [...users, ...(await fetch('/users/2'))];
  yield () => <UserList users={users} />;
}

Code splitting:

async function * MyComponent() {
  yield (<div>Loading...</div>);
  const {LoadedComponent} = await import('./LoadedComponent');
  yield () => <LoadedComponent {...this.props} />;
}

Stream of events:

async function * EventMonitor() {
  for await (const event of this.props.stream)
    yield () => <EventInfo event={event} />;
}