.jsx

class Parent extends Component {
  state = {
    data: null,
  };
  
  componentWillMount() {
    loadData().then(data => {
      this.setState({ data });
    });
  }

  render() {
    const { data } = this.state;
    return (
      <Fragment>
        {!data &&
          <div>Loading...</div>
        }
        {data &&
          <Grapes data={data} />
        }
      </Fragment>
    );
  }
}

class Grapes extends Component {
  componentWillMount() {
    // do grapes stuff that can only happen after you have the data
  }
  
  render() {
    // this will also only happen after you already have the data
  }
}