Component always destroyed and recreated on rerender

[getkey]

I am using extend with a custom-made PointerLockControls.

I pass a couple parameters to it, including collisionObjects which is an array that changes over time.

return (
	// @ts-ignore
	<pointerLockControls
		ref={controlsRef}
		enabled
		args={[camera, 100, 30, true, collisionObjects]}
	/>
);

Everytime collisionObjects changes, the component is destroyed and recreated. I pinpointed the place where this happens: https://github.com/react-spring/react-three-fiber/blob/950d7b5613c88f19eab94b1c29fa224b625dab73/src/reconciler.tsx#L389

This is an issue for me because PointerLockControls holds some state. If it gets recreated, this state resets. (And yes I know this is an anti-pattern with React, but I just copied this module from another project that wasn't using a proper store management system.)

Looking at the react-three-fiber code, in which circumstances can hasNewArgs be false? If we are in commitUpdate, the props will always have one difference, won't they?

Perhaps what we want here is not to check if the values differ, but if the keys do?
That's what the first commented line seems to indicate, but what is done in hasNewArgs is a value check.

      // If it has new props or arguments, then it needs to be re-instanciated
      const hasNewArgs = argsNew.some((value: any, index: number) =>
        is.obj(value)
          ? Object.entries(value).some(([key, val]) => val !== argsOld[index][key])
          : value !== argsOld[index]
      )
      if (hasNewArgs) {
        // Next we create a new instance and append it again
        switchInstance(instance, type, newProps, fiber)
      } else {
        // Otherwise just overwrite props
        applyProps(instance, restNew, restOld, true)
      }

[drcmda]

that's how it's supposed to be. args cannot be changed afterwards, they are literally constructor arguments:

let sth = new Something(1, 2, 3)

if you want to pass 4, 5, 6, then you have to do:

sth = new Something(4, 5, 6)

there are many classes in threejs that you can't mutate after creation, you will normally re-create these (buffergeometry, etc). as a rule of thumb, any new arg will re-instanciate the object.

if your PL-controls can handle prop mutation, then you can do it like this:

<pointerlockControls args={[gl, cam]} collisionObjects={collisionObjects} />

this is how most classes in three work.

[getkey]

Ahhh clear! Thanks!