fix: instance children array would desync from object children array

[krispya]

This guarantees that the React instance children array does not desync from the Three object chidlren array. However, it is computationally expensive to be searching all of these arrays each time so I am keen to think of ways to optimize these operations.

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

Sandbox	Source
example	Configuration

[krispya]

@CodyJasonBennett I wanted to come back to this as desyncs currently happen whenever a list is updated. I know we weren't happy to turn the push into an insert, but this emulates the DOM behavior of appendChild where it moves the child to the end of the array if it is already a child: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Maybe we can think of a faster algorithm?

[CodyJasonBennett]

#3490 (comment) Maybe we can move the check before mutating anything.

// Remove existing child if it exists (re-order to last)
if (child.parent === parent) {
  const existingIndex = parent.children.indexOf(child)
  if (existingIndex !== -1) parent.children.splice(existingIndex, 1)
}

// Link instances
child.parent = parent

// Append child
parent.children.push(child)

[krispya]

Yes this makes sense. I think further optimizations would require convincing React to provide a path for append separate from reorder since it has this information internally. However, for now we can probably not worry about this.