About lifecycle hooks in React - reactjs

Question

I have a higher order component as below. I have difficulty in understanding in which mounts first. See the below:
MAIN COMPONENT (ADD EMPLOYEE)
import React, {useEffect} from 'react';
const AddEmployee = (props) => {
useEffect(()=>{
console.log("USE EFFECT");
},[])
return (//SOME JSX)
}
export default GlobalAxiosHandler(AddEmployee);
HIGHER ORDER COMPONENT
import React, { Component } from 'react';
const GlobalAxiosHandler = (WrappedComponent) => {
return class extends Component {
componentDidMount () {
console.log('GLOBAL COMPONENTDIDMOUNT');
}
render() {
console.log("RENDER GLOBAL");
return (
<React.Fragment>
<WrappedComponent {...this.props}></WrappedComponent>
</React.Fragment>)
}
}
}
The console output is as below
RENDER GLOBAL
GLOBAL COMPONENTDIDMOUNT
USE EFFECT
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:
RENDER GLOBAL
USE EFFECT
GLOBAL COMPONENTDIDMOUNT
But the reverse happened. Can you please explain why. Hope I've articulated it properly.
EDIT: When I use the hooks in the HOC too as below (Using HOOKS both in HOC and Wrapped component):
import React, { useEffect, Component } from 'react';
const GlobalAxiosHandler = (WrappedComponent, axios) => {
const GlobalAxiosHandlerInner = (props) => {
useEffect(()=>{
console.log("USE EFFECT HOC");
})
return (
<React.Fragment>
<WrappedComponent {...props}></WrappedComponent>
</React.Fragment>)
}
return GlobalAxiosHandlerInner;
}
export default GlobalAxiosHandler;
I am seeing output as below (As I anticipated):
USE EFFECT WRAPPER //(THIS IS FROM THE WRAPPED COMPONENT)
USE EFFECT HOC
Can you please explain why the reversal of life cycle events happening?

Answer 1

useEffect is equivalent to componentDidMount (also didUpdate and willUnmount) so it only gets called after the first render, that's exactly what's happening:
render from HOC
render form WrappedComponent
ComponentDidMount from HOC
useEffect from WrappedComponent
The console output should be:
RENDER GLOBAL
GLOBAL COMPONENTDIDMOUNT
USE EFFECT
Nothing wrong happening here