@react-three/fiber 8.0.21 → 8.0.24

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.0.24
+
+### Patch Changes
+
+- ee8e785: fix: attach timings
+
+## 8.0.23
+
+### Patch Changes
+
+- 29d03c64: revert multi attach
+
+## 8.0.22
+
+### Patch Changes
+
+- 419e854: fix: always prepare primitives
+
 ## 8.0.21
 
 ### Patch Changes

package/dist/declarations/src/core/hooks.d.ts

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import { StateSelector, EqualityChecker } from 'zustand';
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { RootState, RenderCallback } from './store';
 import { ObjectMap } from './utils';
 export interface Loader<T> extends THREE.Loader {
@@ -13,12 +14,8 @@ export declare function useStore(): import("zustand").UseBoundStore<RootState, i
 export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
-interface GLTFLike {
-    scene: THREE.Object3D;
-}
-export declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTFLike, GLTFLike & ObjectMap>[] : BranchingReturn<T, GLTFLike, GLTFLike & ObjectMap>;
+export declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
 export declare namespace useLoader {
     var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
     var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;
 }
-export {};

package/dist/declarations/src/core/renderer.d.ts

@@ -12,7 +12,7 @@ export declare type LocalState = {
     type: string;
     root: UseBoundStore<RootState>;
     objects: Instance[];
-    parents: Instance[];
+    parent: Instance | null;
     primitive?: boolean;
     eventCount: number;
     handlers: Partial<EventHandlers>;

package/dist/{index-8e20caed.cjs.dev.js → index-cc1b2b8b.cjs.dev.js}

@@ -164,7 +164,7 @@ function dispose(obj) {
 function prepare(object, state) {
   const instance = object;
 
-  if (!instance.__r3f) {
+  if (state != null && state.primitive || !instance.__r3f) {
     instance.__r3f = {
       type: '',
       root: null,
@@ -173,7 +173,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parents: [],
+      parent: null,
       ...state
     };
   }
@@ -287,7 +287,7 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _localState$parents;
+  var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
   const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -378,7 +378,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if ((_localState$parents = localState.parents) != null && _localState$parents.length && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance);
     if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
@@ -913,9 +913,10 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f, _parentInstance$__r3f;
 
-      // The attach attribute implies that the object attaches itself on the parent.
-      // That is handled at commit to avoid duplication during Suspense
-      if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
+      // The attach attribute implies that the object attaches itself on the parent
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         added = true;
@@ -925,9 +926,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -939,7 +938,9 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f2, _parentInstance$__r3f2;
 
-      if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
+      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -952,9 +953,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -969,7 +968,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
       if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
@@ -1030,10 +1029,10 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _newInstance$__r3f;
+    var _instance$__r3f;
 
-    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
-    if (!(parents != null && parents.length)) return;
+    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
+    if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
@@ -1042,34 +1041,18 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    } // Copy over child attachments
-
-
-    for (const child of instance.__r3f.objects) {
-      appendChild(newInstance, child);
-      detach(instance, child, child.__r3f.attach);
-      attach(newInstance, child, child.__r3f.attach);
     }
 
-    instance.__r3f.objects = [];
-
-    for (const parent of parents) {
-      removeChild(parent, instance);
-      appendChild(parent, newInstance);
-    } // Re-bind event handlers
+    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
 
+    instance.__r3f.objects = [];
+    removeChild(parent, instance);
+    appendChild(parent, newInstance); // Re-bind event handlers
 
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
       const rootState = newInstance.__r3f.root.getState();
 
       rootState.internal.interaction.push(newInstance);
-    } // Attach instance to parent
-
-
-    if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
-      for (const parent of parents) {
-        attach(parent, newInstance, newInstance.__r3f.attach);
-      }
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1110,7 +1093,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers || !!localState.attach;
+      return !!localState.handlers;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
@@ -1156,13 +1139,6 @@ function createRenderer(roots, getEventPriority) {
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
-      } // The attach attribute implies that the object attaches itself on the parent
-
-
-      if (localState.attach) {
-        for (const parent of localState.parents) {
-          attach(parent, instance, localState.attach);
-        }
       }
     },
 
@@ -1176,11 +1152,27 @@ function createRenderer(roots, getEventPriority) {
     detachDeletedInstance: () => {},
 
     hideInstance(instance) {
+      var _instance$__r3f4;
+
+      // Deatch while the instance is hidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
+      var _instance$__r3f5;
+
+      // Re-attach when the instance is unhidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
+      if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
@@ -1605,13 +1597,14 @@ function loadingFn(extensions, onProgress) {
     }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
   };
 }
-
 /**
  * Synchronously loads and caches assets with a three loader.
  *
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
+
+
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];

package/dist/{index-30926efc.esm.js → index-d1db558e.esm.js}

@@ -137,7 +137,7 @@ function dispose(obj) {
 function prepare(object, state) {
   const instance = object;
 
-  if (!instance.__r3f) {
+  if (state != null && state.primitive || !instance.__r3f) {
     instance.__r3f = {
       type: '',
       root: null,
@@ -146,7 +146,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parents: [],
+      parent: null,
       ...state
     };
   }
@@ -260,7 +260,7 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _localState$parents;
+  var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
   const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -351,7 +351,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if ((_localState$parents = localState.parents) != null && _localState$parents.length && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance);
     if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
@@ -886,9 +886,10 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f, _parentInstance$__r3f;
 
-      // The attach attribute implies that the object attaches itself on the parent.
-      // That is handled at commit to avoid duplication during Suspense
-      if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
+      // The attach attribute implies that the object attaches itself on the parent
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         added = true;
@@ -898,9 +899,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -912,7 +911,9 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f2, _parentInstance$__r3f2;
 
-      if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
+      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -925,9 +926,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -942,7 +941,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
       if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
@@ -1003,10 +1002,10 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _newInstance$__r3f;
+    var _instance$__r3f;
 
-    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
-    if (!(parents != null && parents.length)) return;
+    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
+    if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
@@ -1015,34 +1014,18 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    } // Copy over child attachments
-
-
-    for (const child of instance.__r3f.objects) {
-      appendChild(newInstance, child);
-      detach(instance, child, child.__r3f.attach);
-      attach(newInstance, child, child.__r3f.attach);
     }
 
-    instance.__r3f.objects = [];
-
-    for (const parent of parents) {
-      removeChild(parent, instance);
-      appendChild(parent, newInstance);
-    } // Re-bind event handlers
+    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
 
+    instance.__r3f.objects = [];
+    removeChild(parent, instance);
+    appendChild(parent, newInstance); // Re-bind event handlers
 
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
       const rootState = newInstance.__r3f.root.getState();
 
       rootState.internal.interaction.push(newInstance);
-    } // Attach instance to parent
-
-
-    if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
-      for (const parent of parents) {
-        attach(parent, newInstance, newInstance.__r3f.attach);
-      }
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1083,7 +1066,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers || !!localState.attach;
+      return !!localState.handlers;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
@@ -1129,13 +1112,6 @@ function createRenderer(roots, getEventPriority) {
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
-      } // The attach attribute implies that the object attaches itself on the parent
-
-
-      if (localState.attach) {
-        for (const parent of localState.parents) {
-          attach(parent, instance, localState.attach);
-        }
       }
     },
 
@@ -1149,11 +1125,27 @@ function createRenderer(roots, getEventPriority) {
     detachDeletedInstance: () => {},
 
     hideInstance(instance) {
+      var _instance$__r3f4;
+
+      // Deatch while the instance is hidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
+      var _instance$__r3f5;
+
+      // Re-attach when the instance is unhidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
+      if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
@@ -1578,13 +1570,14 @@ function loadingFn(extensions, onProgress) {
     }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
   };
 }
-
 /**
  * Synchronously loads and caches assets with a three loader.
  *
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
+
+
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];

package/dist/{index-786a40b6.cjs.prod.js → index-fbc2ae01.cjs.prod.js}

@@ -164,7 +164,7 @@ function dispose(obj) {
 function prepare(object, state) {
   const instance = object;
 
-  if (!instance.__r3f) {
+  if (state != null && state.primitive || !instance.__r3f) {
     instance.__r3f = {
       type: '',
       root: null,
@@ -173,7 +173,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parents: [],
+      parent: null,
       ...state
     };
   }
@@ -287,7 +287,7 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _localState$parents;
+  var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
   const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -378,7 +378,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if ((_localState$parents = localState.parents) != null && _localState$parents.length && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance);
     if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
@@ -913,9 +913,10 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f, _parentInstance$__r3f;
 
-      // The attach attribute implies that the object attaches itself on the parent.
-      // That is handled at commit to avoid duplication during Suspense
-      if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
+      // The attach attribute implies that the object attaches itself on the parent
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
         added = true;
@@ -925,9 +926,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -939,7 +938,9 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f2, _parentInstance$__r3f2;
 
-      if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
+      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -952,9 +953,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -969,7 +968,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
       if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
@@ -1030,10 +1029,10 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _newInstance$__r3f;
+    var _instance$__r3f;
 
-    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
-    if (!(parents != null && parents.length)) return;
+    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
+    if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
@@ -1042,34 +1041,18 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    } // Copy over child attachments
-
-
-    for (const child of instance.__r3f.objects) {
-      appendChild(newInstance, child);
-      detach(instance, child, child.__r3f.attach);
-      attach(newInstance, child, child.__r3f.attach);
     }
 
-    instance.__r3f.objects = [];
-
-    for (const parent of parents) {
-      removeChild(parent, instance);
-      appendChild(parent, newInstance);
-    } // Re-bind event handlers
+    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
 
+    instance.__r3f.objects = [];
+    removeChild(parent, instance);
+    appendChild(parent, newInstance); // Re-bind event handlers
 
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
       const rootState = newInstance.__r3f.root.getState();
 
       rootState.internal.interaction.push(newInstance);
-    } // Attach instance to parent
-
-
-    if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
-      for (const parent of parents) {
-        attach(parent, newInstance, newInstance.__r3f.attach);
-      }
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1110,7 +1093,7 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers || !!localState.attach;
+      return !!localState.handlers;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
@@ -1156,13 +1139,6 @@ function createRenderer(roots, getEventPriority) {
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
-      } // The attach attribute implies that the object attaches itself on the parent
-
-
-      if (localState.attach) {
-        for (const parent of localState.parents) {
-          attach(parent, instance, localState.attach);
-        }
       }
     },
 
@@ -1176,11 +1152,27 @@ function createRenderer(roots, getEventPriority) {
     detachDeletedInstance: () => {},
 
     hideInstance(instance) {
+      var _instance$__r3f4;
+
+      // Deatch while the instance is hidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
+      var _instance$__r3f5;
+
+      // Re-attach when the instance is unhidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
+      if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
@@ -1605,13 +1597,14 @@ function loadingFn(extensions, onProgress) {
     }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
   };
 }
-
 /**
  * Synchronously loads and caches assets with a three loader.
  *
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
+
+
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-8e20caed.cjs.dev.js');
+var index = require('./index-cc1b2b8b.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-786a40b6.cjs.prod.js');
+var index = require('./index-fbc2ae01.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-30926efc.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-30926efc.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-d1db558e.esm.js';
+export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-d1db558e.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-8e20caed.cjs.dev.js');
+var index = require('../../dist/index-cc1b2b8b.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-786a40b6.cjs.prod.js');
+var index = require('../../dist/index-fbc2ae01.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-30926efc.esm.js';
-export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-30926efc.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-d1db558e.esm.js';
+export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-d1db558e.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.21",
+  "version": "8.0.24",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",