Stack Exchange
React execution order (Hook and Ref)
Code below logs to browser console:
Child1 ref; 
Child1 useLayoutEffect; 
Child2 ref; 
Child2 useLayoutEffect; 
SubParent1 ref; 
SubParent1 useLayoutEffect; 
Parent1 ref; 
Parent1 useLayoutEffect

The question is : Why it is not
Child1 ref 
Child2 ref 
SubParent1 ref 
Parent1 ref 
Child1 useLayoutEffect 
Child2 useLayoutEffect 
SubParent1 useLayoutEffect 
Parent1 useLayoutEffect 

????
const Parent1 = () => {
    useLayoutEffect(() => console.log("Parent1 useLayoutEffect"));
    return (
      <div ref={() => console.log("Parent1 ref")}>
        <SubParent1 />
      </div>
    );
};

const SubParent1 = () => {
    useLayoutEffect(() => console.log("SubParent1 useLayoutEffect"));
    return (
      <div ref={() => console.log("SubParent1 ref")}>
        <Child1 />
        <Child2 />
      </div>
    );
};
const Child1 = () => {
    useLayoutEffect(() => console.log("Child1 useLayoutEffect"));
    return <div ref={() => console.log("Child1 ref")}></div>;
};
const Child2 = () => {
    useLayoutEffect(() => console.log("Child2 useLayoutEffect"));
    return <div ref={() => console.log("Child2 ref")}></div>;
};

root.render(<Parent1 />);

React executes useLayoutEffect before repaint. And (as I am thinking) it creates the whole node tree from parent to child2 and inserts it in dom. So why refs don't execute together?
