title: Unable to render one child component before another in React
body: <p>I am working on a React application which renders two large tables in separate components under one parent component. I have been trying to render the first table before the second one, but I am not able to achieve this. Here is the code sample:</p>
  
  <pre><code>class Parent extends Component {
  constructor(props) {
    super(props);
  
    this.state = ({
      loading: true,
      table1Data: [],
      table2Data: [],
      loadTable2: false
    })
  }
  
  componentDidMount() {
    axios.get('url').then ((response) =&gt; {
      this.setState({
        loading: false,
        table1Data: response.data.users,
        table2Data: response.data.activity
      })
    });
  }
  
  componentDidUpdate(prevProps, prevState) {
    if (prevState.loading != this.state.loading) {
      this.setState({ loadTable2: true });
    }
  }
  
  render() {
    if(this.state.loading) {
      return &lt;Spinner /&gt;;
    }
    return (
      &lt;div&gt;
        &lt;Table1 data={table1Data} /&gt;
        {this.state.loadTable2 &amp;&amp; &lt;Table2 data={table2Data} /&gt;}
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>}</p>
  
  <p>There are some computations done in both <code>&lt;Table1/&gt;</code> and <code>&lt;Table2/&gt;</code>. With the code above, both the tables are rendered together, producing a delay before Table1 is rendered.<br>
  Could someone please help me achieve this functionality? Thanks!</p>