Skip to content

Instantly share code, notes, and snippets.

@sebmarkbage

sebmarkbage/asyncToReact.js

Last active March 31, 2023 15:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sebmarkbage/c17122a302b912de9288b56d276b1dc9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sebmarkbage/c17122a302b912de9288b56d276b1dc9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sebmarkbage revised this gist Sep 20, 2016. No changes.
  2. sebmarkbage revised this gist Sep 20, 2016. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions asyncToReact.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,9 +17,11 @@ function asyncToReact(fn) {
    return this.props.mapper(this.props.data);
    }
    };
    return {
    then(mapper) {
    return <PromiseComponent mapper={mapper} args={args} />;
    }
    };
    return function(...args) {
    return {
    then(mapper) {
    return <PromiseComponent mapper={mapper} args={args} />;
    }
    };
    }
    }
  3. sebmarkbage created this gist Sep 20, 2016.
    25 changes: 25 additions & 0 deletions asyncToReact.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    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 {
    then(mapper) {
    return <PromiseComponent mapper={mapper} args={args} />;
    }
    };
    }
    1 change: 1 addition & 0 deletions fetch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    fetch = asyncToReact(fetch);