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:

<A>
  <B />
</A>

Inside A we have:

useEffect(() => {
  console.log('Parent A useEffect')
})

Inside B we have:

useEffect(() => {
  console.log('Child B useEffect')
})

I did some tests and I saw 2 things:

1. At the first load (after F5, for example), the log result is:

Parent A useEffect

Child B useEffect

2. If we go to another component and then come back to component B (not by reloading but by using react-router, for example), the log result is:

Child B useEffect

Parent A useEffect

In two cases, the results are reversed. This makes me a bit confused.

I searched Google about componentDidMount and I found this: https://github.com/facebook/react/blob/v15.0.1/docs/docs/ref-03-component-specs.md#mounting-componentdidmount

The componentDidMount() method of child components is invoked before that of parent components.

But I couldn't find the corresponding docs about useEffect

So what is the correct order of execution of useEffect in parent/child components?

Answer 1

Ok I will try to clear your confusion. If you have some components like this

<A>
 <B />
</A>

Then on the first load (Reload) log will be

Child B useEffect

Parent A useEffect

Then lets say you navigate to some route and then go to Child component log will be

Child B useEffect

Parent useEffect won't be called.

As react doc says

you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

So all of these lifecycle methods are called after the component is mounted and when component is mounted the child components inside that component have already been mounted and their lifeCycle have been called already

Sandbox to give you an idea how useEffect is called, it has Roster as Parent and Schedule as child. if you navigate to Header and come back to Schedule only it's useEffect is called.

In your case maybe Parent useEffect is being called when you navigate to child component but that is because of some other reason maybe you have some callback that sets Parent state and thus cause it's useEffect to be called, but we are talking about how useEffect works in general case

Hope it helps

Answer 2

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.