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} />;
      }}
    />;
  );
}

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.