[v9] experiment: create objects with container effects

[CodyJasonBennett]

Continues #2378, follow-up to #2465.

Defers instance object creation to when the tree is being linked, avoiding duplication of constructor side-effects.

[krispya]

Studying this some more, am I understanding correctly that this PR would move the instance class construction from the render phase to the commit phase? And in doing so would negate the concurrency benefits of allowing work to be sliced and yielded in the render phase? ie facebook/react#20271 (comment)

Also, why is the object creation and mutation done on appendChild and not commitMount as suggested here? https://github.com/facebook/react/tree/main/packages/react-reconciler#appendchildparentinstance-child

[CodyJasonBennett]

Yes, this intentionally opts out of concurrency and suspense; that is only useful for the virtualized instances rather than their (real) three.js counterparts. We use handleContainerEffects from #2465 over commitMount as this is called for incomplete trees which can lead to duplication (#2250). This should effectively batch changes to the scene-graph.

[krispya]

I have been testing this PR and it does what it says on the tin. My custom classes have side effects that run only once, even with a series of contrived and nested suspense. However, all children have stopped attaching. Only the top level group of a component attaches and then it has no children!

[CodyJasonBennett]

I'll need to mirror react-ogl. It has the v9 architecture and does this without issue.

[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 a83e06e:

Sandbox	Source
example	Configuration

[krispya]

Works beautifully now. I'll be testing with some complicated setups and see if anything breaks. Do you anticipate any problems I should look out for?

[krispya]

Used to be that adding props to primitive worked, but with this PR it does not. I know it's an odd use case, but one that is used in Drei currently.

const controls = useMemo(
	() => new FlyControlsImpl(camera, explDomElement),
	[camera, explDomElement]
);

return (
	<primitive
		object={controls}
		args={[camera, explDomElement]}
		movementSpeed={movementSpeed}
		rollSpeed={rollSpeed}
		dragToLook={dragToLook}
		{...rest}
	/>
);