title: About lifecycle hooks in React
body: <p>I have a higher order component as below. I have difficulty in understanding in which mounts first. See the below:</p>
  
  <p><strong>MAIN COMPONENT (ADD EMPLOYEE)</strong></p>
  
  <pre><code>import React, {useEffect} from 'react';
  
  const AddEmployee = (props) =&gt; {
  
      useEffect(()=&gt;{
          console.log("USE EFFECT");
      },[])
  
      return (//SOME JSX)
  }
  
  export default GlobalAxiosHandler(AddEmployee);
  </code></pre>
  
  <p><strong>HIGHER ORDER COMPONENT</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  const GlobalAxiosHandler = (WrappedComponent) =&gt; {
  
      return class extends Component {
  
          componentDidMount () {
              console.log('GLOBAL COMPONENTDIDMOUNT');
          }
  
       render() {
  
              console.log("RENDER GLOBAL");
              return (
                  &lt;React.Fragment&gt;
                      &lt;WrappedComponent {...this.props}&gt;&lt;/WrappedComponent&gt;
                  &lt;/React.Fragment&gt;)
          }
      }
  
  }
  </code></pre>
  
  <p>The console output is as below</p>
  
  <pre><code>RENDER GLOBAL
  GLOBAL COMPONENTDIDMOUNT
  USE EFFECT
  </code></pre>
  
  <p>My question here is: Since wrapped component act as a child component to HOC, hence the componentDidMount() of HOC should get executed after useEffect() in the wrapped component. In such a case the output should've been like the below:</p>
  
  <pre><code>RENDER GLOBAL
  USE EFFECT
  GLOBAL COMPONENTDIDMOUNT
  </code></pre>
  
  <p>But the reverse happened. Can you please explain why. Hope I've articulated it properly.</p>
  
  <p><strong>EDIT</strong>: When I use the hooks in the HOC too as below (Using HOOKS both in HOC and Wrapped component):</p>
  
  <pre><code>import React, { useEffect, Component } from 'react';
  
  const GlobalAxiosHandler = (WrappedComponent, axios) =&gt; {
  
      const GlobalAxiosHandlerInner = (props) =&gt; {
  
          useEffect(()=&gt;{
              console.log("USE EFFECT HOC");
          })
  
              return (
                  &lt;React.Fragment&gt;
                      &lt;WrappedComponent {...props}&gt;&lt;/WrappedComponent&gt;
                  &lt;/React.Fragment&gt;)
      }
  
    return GlobalAxiosHandlerInner;
  }
  
  export default GlobalAxiosHandler;
  </code></pre>
  
  <p>I am seeing output as below (As I anticipated):</p>
  
  <pre><code>USE EFFECT WRAPPER  //(THIS IS FROM THE WRAPPED COMPONENT)
  USE EFFECT HOC
  </code></pre>
  
  <p>Can you please explain why the reversal of life cycle events happening?</p>