experiment: stable object sort (#3066)

pmndrs · Oct 25, 2023 · 0b8c8c6 · 0b8c8c6
1 parent 2ed531a
commit 0b8c8c6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/packages/fiber/src/core/renderer.ts b/packages/fiber/src/core/renderer.ts
@@ -172,7 +172,13 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
         added = true
       }
 
-      if (!added) parentInstance.__r3f?.objects.push(child)
+      const objects = parentInstance.__r3f?.objects
+      if (!added && objects) {
+        const index = objects.indexOf(beforeChild)
+        if (index !== -1) objects.splice(index, 0, child)
+        else objects.push(child)
+      }
+
       if (!child.__r3f) prepare(child, {})
       child.__r3f.parent = parentInstance
       updateInstance(child)
@@ -189,8 +195,11 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
       // Clear the parent reference
       if (child.__r3f) child.__r3f.parent = null
       // Remove child from the parents objects
-      if (parentInstance.__r3f?.objects)
-        parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter((x) => x !== child)
+      const objects = parentInstance.__r3f?.objects
+      if (objects) {
+        const index = objects.indexOf(child)
+        if (index !== -1) objects.splice(index, 1)
+      }
       // Remove attachment
       if (child.__r3f?.attach) {
         detach(parentInstance, child, child.__r3f.attach)
@@ -263,13 +272,16 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
     instance.__r3f.objects.forEach((child) => appendChild(newInstance, child))
     instance.__r3f.objects = []
 
+    const autoRemovedBeforeAppend = !!newInstance.parent
+
     if (!instance.__r3f.autoRemovedBeforeAppend) {
+      insertBefore(parent, newInstance, instance)
       removeChild(parent, instance)
+    } else {
+      appendChild(parent, newInstance)
     }
-    if (newInstance.parent) {
-      newInstance.__r3f.autoRemovedBeforeAppend = true
-    }
-    appendChild(parent, newInstance)
+
+    newInstance.__r3f.autoRemovedBeforeAppend = autoRemovedBeforeAppend
 
     // Re-bind event handlers
     if (newInstance.raycast && newInstance.__r3f.eventCount) {

diff --git a/packages/test-renderer/src/__tests__/__snapshots__/RTTR.core.test.tsx.snap b/packages/test-renderer/src/__tests__/__snapshots__/RTTR.core.test.tsx.snap
@@ -293,13 +293,6 @@ Array [
       },
       Object {
         "children": Array [
-          Object {
-            "children": Array [],
-            "props": Object {
-              "args": Array [],
-            },
-            "type": "meshBasicMaterial",
-          },
           Object {
             "children": Array [],
             "props": Object {
@@ -310,6 +303,13 @@ Array [
             },
             "type": "boxGeometry",
           },
+          Object {
+            "children": Array [],
+            "props": Object {
+              "args": Array [],
+            },
+            "type": "meshBasicMaterial",
+          },
         ],
         "props": Object {
           "args": Array [],