reactjsuse-effect

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

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

  1. 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?

Solution

  • 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