Idea for Dataloader component

Dataloader.js

// The `loader` argument is a Dataloader instance
// https://github.com/facebook/dataloader
const makeLoader = (loader) => {
  class Dataloader extends React.Component {
    state = {data: null, isLoaded: false};
    componentWillMount() {
      this.prefetchData(this.props);
    }
    componentWillReceiveProps(nextProps) {
      if (this.props.id !== nextProps.id) {
        this.setState({isLoaded: false});
        this.prefetchData(nextProps);
      }
    }
    async prefetchData(props) {
      const data = await loader.load(props.id);
      this.setState({data, isLoaded: true});
    }
    render() {
      return this.props.render(this.state.data, this.state.isLoaded);
    }
  }
  
  return Dataloader;
};


// TODO: Support for loader.loadMany, loader.clear

usage.js

const Postloader = makeLoader(postLoader);

function PostContainer {
  return (
    <Postloader
      id="123"
      render={(post, isLoaded) => {
        if (!isLoaded) {
          return <Spinner />;
        }
        return <Post post={post} />;
      }}
    />;
  );
}