Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Advanced example for eagerly prefetching async data in a React component.
// 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 ...
}
}
}
@petetnt

This comment has been minimized.

Copy link

@petetnt petetnt commented Mar 27, 2018

@mqklin

This comment has been minimized.

Copy link

@mqklin mqklin commented Mar 30, 2018

So constructor is being called before componentDidMount ?

@aryzle

This comment has been minimized.

Copy link

@aryzle aryzle commented Mar 30, 2018

@mqklin yes

@kushalmahajan

This comment has been minimized.

Copy link

@kushalmahajan kushalmahajan commented Nov 28, 2018

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 });
      }
    });
  }
@dangeezz

This comment has been minimized.

Copy link

@dangeezz dangeezz commented Apr 19, 2019

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

@VahidBo

This comment has been minimized.

Copy link

@VahidBo VahidBo commented Oct 2, 2019

Whay if we do like this???

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

This comment has been minimized.

Copy link

@MadKimchi MadKimchi commented Jan 17, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.