I am trying to understand why the useEffect of a children component gets called before the Parent component useEffect.
From my understanding, useEffect shoulde be called in the order they are defined based on React's documentation:
React will apply every effect used by the component, in the order they were specified.
This would mean, a Parent's useEffect should be called before a Children's useEffect, but this is not the case.
Example:
const MainComponent = () => { return { <ParentComponent /> } const ParentComponent = () => { useEffect(() => { console.log('parent'); }, []); return <div>Parent <ChildrenComponent /></div>; } const ChildrenComponent = () => { useEffect(() => { console.log('children'); }, []); return <div>Children</div>; } If you check the console, you should see first children and then parent
Live Code: https://codesandbox.io/s/crazy-butterfly-yn046?file=/src/App.js
My gut tells me this has to do with how react does Layout and Paint of the Parent-Children components?
