Skip to content

Instantly share code, notes, and snippets.

@jaredwilli
Forked from sebmarkbage/asyncToReact.js
Created November 24, 2017 09:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jaredwilli/596540dab763950e03f44cb8e475fd35 to your computer and use it in GitHub Desktop.
Save jaredwilli/596540dab763950e03f44cb8e475fd35 to your computer and use it in GitHub Desktop.
Convert Async Function to React Component
function asyncToReact(fn) {
class PromiseComponent extends React.Component {
state = { waiting: true, result: null };
componentDidMount() {
fn(...this.props.args).then(result => this.setState({ waiting: false, result }));
}
componentDidUpdate() {
fn(...this.props.args).then(result => this.setState({ waiting: false, result }));
}
shouldComponentUpdate(newProps) {
return this.props.args.some((arg, i) => !shallowEquals(arg, newProps.args[i]));
}
render() {
if (this.state.waiting) {
return null; // TODO: When Fiber works, use async dependency placeholder.
}
return this.props.mapper(this.props.data);
}
};
return function(...args) {
return {
then(mapper) {
return <PromiseComponent mapper={mapper} args={args} />;
}
};
}
}
fetch = asyncToReact(fetch);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment