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

Comienza con la página de referencia de useEffect, especialmente con sus secciones Caveats y Troubleshooting, y después revisa el recorrido de ReactFiberCommitWork.js enlazado para obtener contexto. Se considerará terminado cuando la página documente claramente que los Effects secundarios se committed antes que los Effects principales, usando el ejemplo reportado y evitando cualquier implicación de que este comportamiento sea un error.