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

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

• https://github.com/facebook/react/issues/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? :)

Start with the useEffect reference page, especially its Caveats and Troubleshooting sections, then review the linked ReactFiberCommitWork.js traversal for context. Done means the page clearly documents that child Effects are committed before parent Effects, using the reported example and avoiding any implication that this behavior is a bug.