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

先从 useEffect 参考页面开始，尤其是其中的 Caveats 和 Troubleshooting 部分，然后查看链接的 ReactFiberCommitWork.js 遍历以了解上下文。当页面使用报告中的示例，清楚记录子 Effects 会在父 Effects 之前被 committed，并避免让人产生这种行为是 bug 的任何暗示时，即视为完成。