reactjs
[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? :)
+1 on this. This is related too: https://github.com/facebook/react/issues/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
