Idea for Dataloader component

Dataloader.js

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

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

usage.js

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

If you render multiple Dataloader components, it'll batch together all the ids and send them to the server as a single request. Yay!

See https://github.com/facebook/dataloader for more details on how that works. It's a really nice API.

Obviously, this isn't as powerful as GraphQL/Relay/Apollo, but it's simple and works with most backends.

I thought setting state in cWM was a no no?

Fixed

Also, an async setState is fine in componentWillMount. It's actually the primary use case: initiating a data request as early as possible.

I've been programmed to think no setState in cWM and had no idea it was ok if async. Glad I checked this out. And nice idea.

(I also don't even think ReasonReact supports cWM, but could be wrong)

I'm also confused about it because of this Dan's SO answer and the React docs about cWM and cDM, so not sure what to do in a case like this.