[Suggestion]: Adding documentation to note that Effects in children components are committed before their parent component

[tengweiherr]

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? :)

[tengweiherr]

I am happy to help if needed!

[rickhanlonii]

@gaearon what do you think?

[proyectoramirez]

+1 on this. This is related too: facebook/react#19482

It would also be nice to either provide an alternative for how to achieve the reverse behavior (parents first, children later) or assert that this is not possible