Summary

Adding documentation to the useEffect page to note that Effects in children components are committed before their parent component

Page

https://react.dev/reference/react/useEffect

Details

Hi

I was digging into React internals and learning how it works under the hood. I came across an interesting behaviour in Effects -- where the Effects in children components are committed before their parent component.

For example:

function Parent({ children }) { useEffect(() => { console.log("Parent committed effect"); }, []); return <div>{children}</div>; } function Child() { useEffect(() => { console.log("Child committed effect"); }, []); return <p>Child</p>; } export default function App() { return ( <Parent> <Child /> </Parent> ); } 

The result in the console will be

Child committed effect Parent committed effect 

(I made a small animation describing the traversal)

I understand that it is due to how React traverses the Fiber tree during the Commit phase (recursivelyTraversePassiveMountEffects), but it seems like it does confuse some people in

• useEffect firing in children before parent facebook/react#15281
• https://www.reddit.com/r/reactjs/comments/1447nft/how_the_useeffect_work_in_react/

This is not a bug, but I think it would be helpful to have this documented, perhaps in the Caveats or the Troubleshooting section to avoid confusion around this "unexpected behaviour".

What do you think? :)