title: Wait for ComponentDidMount to finish loading in highest component in ReactJS
body: <p>So I manage user auth in my <code>AppRouter.js</code>which is my highest component. </p>
  
  <p>Here is how it works: </p>
  
  <pre><code>componentDidMount() {
    this.getUser()
  }
  
  getUser(history = undefined) {
    const { cookies } = this.props
    let jwt = cookies.get(this.state.cookieName)
    if (!jwt) return null
  
    AuthApi.getCurrentUser(jwt).then(response =&gt; {
      if (response !== undefined) {
        this.setState({
          email: response.email,
          userId: response.id,
          firstName: response.first_name,
          lastName: response.last_name,
          phoneNumber: response.phone_number,
          randomString: response.random_string,
          jwt: jwt
        })
        if (history) history.push('/')
      }
      else {
        // user has cookie but cannot load current user
        cookies.remove(this.state.cookieName)
        this.setState({
          email: undefined,
          firstName: undefined,
          lastName: undefined,
          phoneNumber: undefined,
          randomString: undefined,
          jwt: undefined,
          userId: undefined
        })
      }
    })
  }
  </code></pre>
  
  <p>My problem is, I also call <code>componentDidMount()</code> in children components and the code there depends on the result of my <code>AppRouter</code>'s <code>componentDidMount()</code> output. </p>
  
  <p>Here is an example with my <code>MyOrdersPage.js</code> component that receives <code>AppRouter</code>'s state as props: </p>
  
  <pre><code>componentDidMount() {
      axios.get('/api/v1/orders/' + this.props.currentUser.userId)
      .then(response =&gt; {
        console.log(response)
          this.setState({
              orders: response.data
          })
      })
      .catch(error =&gt; console.log(error))
    }
  </code></pre>
  
  <p>However, <code>AppRouter</code>'s <code>componentDidMount()</code> finishes loading after <code>MyOrdersPage.js</code> 's <code>componentDidMount()</code>. Hence, <code>this.props.currentUser.userId</code> is <code>undefined</code> when <code>MyOrdersPage.js</code> 's <code>componentDidMount()</code> runs. </p>
  
  <p>How can I change my code so that <code>componentDidMount()</code> from children components only loads when <code>componentDidMount()</code> is done loading in <code>AppRouter.js</code> ? </p>