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?

Frei

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

Conic

Answer 2

I know this is old, but I'll put my answer in case I visit it again in the future.

The default execution order of useEffect can be represented like this:

if we have three elements and the three of them call useEffect hooks, the execution order is:

<ThirdExecuted>
  <SecondExecuted>
    <FirstExecuted>
    </FirstExecuted>
  </SecondExecuted>
</ThirdExecuted>

and the execution will happen after the render is completed. So it's safe to select nodes from it in case you need to manually modify them (like adding animation maybe).

---

However, if you need parents useEffect called first, then you should use useLayoutEffect instead.

This has changed with React 17, see this comment. LayoutEffect runs in the same order with respect to the component's children.

Scorpaenoid

Answer 3

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.

Seawards

Thank you for your answer. But can you please update it to be easier to understand? What is the reason of case 1 (after reloading) and what is the reason of case 2 (using react-router)? – Frei

@HoangTrinh I have faced the similar issue. But the different thing is that my console always shows the same order case 1 and case 2. Also, I can find the answer to why the child component always executes useEffect in your react doc link. Thanks! hope you find your answer. – Kalif