[v9] experiment: rework reconciler architecture, create objects on commit

[CodyJasonBennett]

Fixes #2250 and a host of other issues when mutating a three.js object as an internal instance by separating the two and delegating three.js object creation until commit mount. This mitigates side-effects from creating objects and mutating them since the tree is now finalized and connected via instance descriptors.

An instance now looks like this, with object being the underlying three.js object and object.__r3f referring to its respective Instance:

interface Instance {
  root: UseBoundStore<RootState>
  type: string
  parent: Instance | null
  children: Instance[]
  props: InstanceProps
  object: any | null
  eventCount: number
  handlers: Partial<EventHandlers>
  attach?: AttachType
  previousAttach?: any
}

Notably, objects was renamed children and is used for all instances, regardless of the use of attach. memoizedProps is now props and indiscriminately contains elements' props.

Note: I'm keeping this as a draft until I clarify the behavior of commitMount and container instances with react. #2268 should have been sufficient to fix #2250, but useLayoutEffect fires before container instances are committed. This affects portals in this PR and is the reason behind the usage of <primitive object={scene} /> in root#render and the omission of container reconciler hooks.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5b3a237:

Sandbox	Source
example	Configuration
append-bug	Issue #2250

[CodyJasonBennett]

This PR causes ULE in Portal to fire without a ref attached outside of createPortal.

[CodyJasonBennett]

Looks like reconciler hook timings are really off for elements coming off of suspend as well.

import * as React from 'react'
import * as THREE from 'three'
import { suspend } from 'suspend-react'
import { createPortal, Canvas } from '@react-three/fiber'

function Test() {
  suspend(async () => null, [])
  const group = React.useRef<THREE.Group>(null!)
  React.useEffect(() => console.log('Test useEffect', group.current?.uuid), [])
  React.useLayoutEffect(() => console.log('Test useLayoutEffect', group.current?.uuid), [])
  return <group name="Test" ref={group} />
}

function Portal({ children }: { children?: React.ReactNode }) {
  const group = React.useRef<THREE.Group>(null!)
  const [scene] = React.useState(() => new THREE.Scene())
  React.useEffect(() => void console.log('Portal useEffect', group.current?.uuid), [])
  React.useLayoutEffect(() => void console.log('Portal useLayoutEffect', group.current?.uuid), [])
  return (
    <group name="Portal" ref={group}>
      {children && createPortal(children, scene)}
    </group>
  )
}

export default () => (
  <Canvas>
    <Portal>
      <React.Suspense>
        <Test />
      </React.Suspense>
    </Portal>
  </Canvas>
)

[CodyJasonBennett]

Continued in #2465, dropping architecture changes.