Skip to content

Instantly share code, notes, and snippets.

@sebmarkbage
Last active March 31, 2023 15:57
Show Gist options
  • Save sebmarkbage/c17122a302b912de9288b56d276b1dc9 to your computer and use it in GitHub Desktop.
Save sebmarkbage/c17122a302b912de9288b56d276b1dc9 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);
@stereobooster
Copy link

  • Do we need componentWillUnmount and "unsubscribe" for promise?
  • What about reject?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment