Advanced example for eagerly prefetching async data in a React component.

eager-prefetching-async-data-example.js

// This is an advanced example! It is not intended for use in application code.
// Libraries like Relay may make use of this technique to save some time on low-end mobile devices.
// Most components should just initiate async requests in componentDidMount.

class ExampleComponent extends React.Component {
  _hasUnmounted = false;

  state = {
    externalData: null,
  };

  constructor(props) {
    super(props);

    // Prime an external cache as early as possible.
    // Async requests are unlikely to complete before render anyway,
    // So we aren't missing out by not providing a callback here.
    asyncLoadData(this.props.someId);
  }

  componentDidMount() {
    // Now that this component has mounted,
    // Wait for earlier pre-fetch to complete and update its state.
    // (This assumes some kind of external cache to avoid duplicate requests.)
    asyncLoadData(this.props.someId).then(externalData => {
      if (!this._hasUnmounted) {
        this.setState({ externalData });
      }
    });
  }

  componentWillUnmount() {
    this._hasUnmounted = true;
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }
}