Design pattern for processes reporting that they're done (in React)

I'm rendering a page in a web application.
The page requires several subcomponents to be initialized and populated with data before the UI is rendered.

Let's say I have 3 subcomponents called compA, CompB and compC that need to be initialized with data before the component UserView can be rendered and displayed to the enduser.

How would I go about telling UserView that it can be rendered?
I'll use React components as an example but really I'm looking for a general solution that would be preferred to solve this type of problem (see explaination below code):

var UserView = React.createClass({

  getInitialState: function() {
    return {
        readyToRender: false
    };
  },

  componentWillMount: function() {
    initComp("A");
    initComp("B");
    initComp("C");
  },

  initComp(component): function() {
    // do stuff
    reportReady(component);
  },

  render: function() {
    if (this.state.readyToRender) {
        return (
            <div>
            <CompA data={this.state.compAdata} />
          <CompB data={this.state.compBdata} />
          <CompC data={this.state.compCdata} />
          </div>
        );
    } else
        return false;
  }
});

For those unfamiliar with React:
getInitialState is called once to set the initial state of UserView.
componentWillMount is called once before rendering UserView, before render.
render is called whenever the state of UserView has changed and the component needs to be re-rendered.

Is this design pattern preferable to solve this problem?
Furthermore, how would I go about implementing reportReady(component) and how should I store the results? (Maybe as an array of booleans?)