Confusing rendering order

[lgharibashvili]

Hello,

I noticed that full R3F tree inside Canvas is rendered separately from the containing DOM elements.
When rendering DOM elements, we are used to the fact that React Reconciler recursively goes down the JSX tree, rendering elements bottom-up.

For example:

<div id="1">
    <div id="2">
        <div id="3"/>
    </div>
</div>

In this case it would render elements in the following order: 3, 2, 1.

However, if we add a Canvas element, we get a different order:

<div id="1">
    <div id="2">
        <div id="3">
            <Canvas>
                <mesh /*4*/>
                    <boxGeometry /*5*//>
                </mesh>
            </Canvas>
       </div>
    </div>
</div>

In this case the order becomes: 3, 2, 1, 5, 4.
Basically, DOM tree is rendered fully and then it moves on to R3F tree.

I created a little codesandbox to illustrate it:
https://codesandbox.io/s/react-three-fiber-rendering-order-26qekl?file=/src/index.tsx

This can be problematic when using useRef, because if we are passing ref object from containing component, it will be attached late and ref.current will be undefined during useEffect (as opposed to passing ref to DOM elements).

I created another codesandbox to illustrate that:
https://codesandbox.io/s/react-three-fiber-rendering-order-forked-qpjpc5?file=/src/index.tsx

This problem can be sidestepped by using useRef from a component that is inside R3F tree (inside Canvas element).

I wonder if this behavior is intended or if it is an unintended side effect of the way react reconciler works.