Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save hzhu/b805af4aa56806bf43505d0e1c5b268b to your computer and use it in GitHub Desktop.
Save hzhu/b805af4aa56806bf43505d0e1c5b268b to your computer and use it in GitHub Desktop.
Example for loading new external data in response to updated props
// This is an example of how to fetch external data in response to updated props,
// If you are using an async mechanism that does not support cancellation (e.g. a Promise).
class ExampleComponent extends React.Component {
_currentId = null;
state = {
externalData: null
};
static getDerivedStateFromProps(nextProps, prevState) {
// Store prevId in state so we can compare when props change.
// Clear out previously-loaded data (so we don't render stale stuff).
if (nextProps.id !== prevState.prevId) {
return {
externalData: null,
prevId: nextProps.id
};
}
// No state update necessary
return null;
}
componentDidMount() {
this._loadAsyncData(this.props.id);
}
componentDidUpdate(prevProps, prevState) {
if (prevState.externalData === null) {
this._loadAsyncData(this.props.id);
}
}
componentWillUnmount() {
// Prevent potential setState calls after unmount,
// (Since these trigger DEV warnigs)
_currentId = null;
}
render() {
if (this.state.externalData === null) {
// Render loading state ...
} else {
// Render real UI ...
}
}
_loadAsyncData(id) {
if (id === this._currentId) {
// Data for this id is already loading
}
this._currentId = id;
asyncLoadData(id).then(externalData => {
// Only update state if the Promise that has just resolved,
// Reflects the most recently requested external data.
if (id === this._currentId) {
this.setState({ externalData });
}
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment