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 ...
    }
  }
}

https://gist.github.com/bvaughn/89700e525ff423a75ffb63b1b1e30a8f#file-eager-prefetching-async-data-example-js-L37

should probably be this.state.externalData :)

So constructor is being called before componentDidMount ?

@mqklin yes

To avoid caching, what if we did @bvaughn

constructor(props) {
    super(props);
    this.myPromise = asyncLoadData(this.props.someId);
  }
componentDidMount() {
    this.myPromise.then(externalData => {
      if (!this._hasUnmounted) {
        this.setState({ externalData });
      }
    });
  }

@kushalmahajan I think that should avoid caching since you have a pending Promise to be fulfilled with your data;

Whay if we do like this???

  constructor(props) {
    super(props);
    asyncLoadData(this.props.someId).then(externalData => {
      if (!this._hasUnmounted) {
        this.setState({ externalData });
      }
    });
  }

Why context is not available in the constructor level? I think it makes sense to have this.context available in the constructor level.