What is the correct order of execution of useEffect in React parent and child components?

Question

For example, if I have components A and B, and component B is the child of component A:

Inside A we have:

Answer 1

if you want useEffect to behave like the componentDidMount() just pass the [] as the second argument after the callback argument.

useEffect(()=>{
// this we executed once the component is mounted (mimic the componentDidMount)
},[])

so the useEffect introduced instead of using componentDidMount or componentDidUpdate so in the cases above when you reload it behaves like componentDidMount and on the second case when the component already mounted and you navigated back it behaves like componentDidUpdate.

if you are serious about the console log's for that I would say the useEffect calls the callback(first argument) in Asynchronous matter

from the react doc

Unlike componentDidMount or componentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen. This makes your app feel more responsive. The majority of effects don’t need to happen synchronously.