@react-three/fiber 8.0.18 → 8.0.21

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.0.21
+
+### Patch Changes
+
+- 3098b9b: fix: resizing in worker contexts, copy over attachments on reconstruct
+
+## 8.0.20
+
+### Patch Changes
+
+- 4c87bce: fix: attach, devtools, and perf fixes
+
+## 8.0.19
+
+### Patch Changes
+
+- 360b45a: fix: handle attach on reconstruct
+
 ## 8.0.18
 
 ### Patch Changes

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

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

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

@@ -17,6 +17,7 @@ export declare type Dpr = number | [min: number, max: number];
 export declare type Size = {
     width: number;
     height: number;
+    updateStyle?: boolean;
 };
 export declare type Viewport = Size & {
     initialDpr: number;
@@ -80,7 +81,7 @@ export declare type RootState = {
     invalidate: (frames?: number) => void;
     advance: (timestamp: number, runGlobalEffects?: boolean) => void;
     setEvents: (events: Partial<EventManager<any>>) => void;
-    setSize: (width: number, height: number) => void;
+    setSize: (width: number, height: number, updateStyle?: boolean) => void;
     setDpr: (dpr: Dpr) => void;
     setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
     onPointerMissed?: (event: MouseEvent) => void;

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

@@ -137,7 +137,7 @@ function dispose(obj) {
 function prepare(object, state) {
   const instance = object;
 
-  if (state != null && state.primitive || !instance.__r3f) {
+  if (!instance.__r3f) {
     instance.__r3f = {
       type: '',
       root: null,
@@ -146,7 +146,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parent: null,
+      parents: [],
       ...state
     };
   }
@@ -260,10 +260,10 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState;
+  var _instance$__r3f3, _root$getState, _localState$parents;
 
   // Filter equals, events and reserved props
-  const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+  const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
   const root = localState.root;
   const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
   const {
@@ -351,7 +351,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if ((_localState$parents = localState.parents) != null && _localState$parents.length && 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
@@ -453,7 +453,6 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
 
 function removeInteractivity(store, object) {
   const {
-    events,
     internal
   } = store.getState(); // Removes every trace of an object from the data store
 
@@ -680,14 +679,14 @@ function createEvents(store) {
     return intersections;
   }
 
-  function cancelPointer(hits) {
+  function cancelPointer(intersections) {
     const {
       internal
     } = store.getState();
     Array.from(internal.hovered.values()).forEach(hoveredObj => {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
-      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
+      if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
         const instance = eventObject.__r3f;
         const handlers = instance == null ? void 0 : instance.handlers;
@@ -696,7 +695,7 @@ function createEvents(store) {
         if (instance != null && instance.eventCount) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
-            intersections: hits || []
+            intersections
           };
           handlers.onPointerOut == null ? void 0 : handlers.onPointerOut(data);
           handlers.onPointerLeave == null ? void 0 : handlers.onPointerLeave(data);
@@ -899,7 +898,9 @@ 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.parent = parentInstance;
+
+      child.__r3f.parents.push(parentInstance);
+
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -911,9 +912,7 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f2, _parentInstance$__r3f2;
 
-      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
+      if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -926,7 +925,9 @@ 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.parent = parentInstance;
+
+      child.__r3f.parents.push(parentInstance);
+
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -941,7 +942,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // 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
 
@@ -1002,11 +1003,11 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _instance$__r3f2;
+    var _instance$__r3f, _newInstance$__r3f;
 
-    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
-    if (!parent) return;
-    const newInstance = createInstance(type, newProps, (_instance$__r3f2 = instance.__r3f) == null ? void 0 : _instance$__r3f2.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
+    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
+    if (!(parents != null && parents.length)) 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
     // This can not include primitives, which should not have declarative children
@@ -1014,18 +1015,34 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    }
+    } // Copy over child attachments
+
 
-    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
+    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 = [];
-    removeChild(parent, instance);
-    appendChild(parent, newInstance); // Re-bind event handlers
+
+    for (const parent of parents) {
+      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) {
@@ -1061,9 +1078,9 @@ function createRenderer(roots, getEventPriority) {
     getChildHostContext: parentHostContext => parentHostContext,
 
     finalizeInitialChildren(instance) {
-      var _instance$__r3f3;
+      var _instance$__r3f2;
 
-      const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // https://github.com/facebook/react/issues/20271
+      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;
@@ -1104,11 +1121,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     commitMount(instance, type, props, int) {
-      var _instance$__r3f4;
+      var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
       // This will make sure events are only added once to the central container
-      const localState = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
@@ -1116,7 +1133,9 @@ function createRenderer(roots, getEventPriority) {
 
 
       if (localState.attach) {
-        attach(localState.parent, instance, localState.attach);
+        for (const parent of localState.parents) {
+          attach(parent, instance, localState.attach);
+        }
       }
     },
 
@@ -1254,7 +1273,8 @@ const createStore = (invalidate, advance) => {
       },
       size: {
         width: 0,
-        height: 0
+        height: 0,
+        updateStyle: false
       },
       viewport: {
         initialDpr: 0,
@@ -1271,11 +1291,12 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height) => {
+      setSize: (width, height, updateStyle) => {
         const camera = get().camera;
         const size = {
           width,
-          height
+          height,
+          updateStyle
         };
         set(state => ({
           size,
@@ -1321,35 +1342,29 @@ const createStore = (invalidate, advance) => {
         initialHits: [],
         capturedMap: new Map(),
         subscribe: (ref, priority, store) => {
-          set(({
-            internal
-          }) => ({
-            internal: { ...internal,
-              // If this subscription was given a priority, it takes rendering into its own hands
-              // For that reason we switch off automatic rendering and increase the manual flag
-              // As long as this flag is positive there can be no internal rendering at all
-              // because there could be multiple render subscriptions
-              priority: internal.priority + (priority > 0 ? 1 : 0),
-              // Register subscriber and sort layers from lowest to highest, meaning,
-              // highest priority renders last (on top of the other frames)
-              subscribers: [...internal.subscribers, {
-                ref,
-                priority,
-                store
-              }].sort((a, b) => a.priority - b.priority)
-            }
-          }));
+          const internal = get().internal; // If this subscription was given a priority, it takes rendering into its own hands
+          // For that reason we switch off automatic rendering and increase the manual flag
+          // As long as this flag is positive there can be no internal rendering at all
+          // because there could be multiple render subscriptions
+
+          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+          internal.subscribers.push({
+            ref,
+            priority,
+            store
+          }); // Register subscriber and sort layers from lowest to highest, meaning,
+          // highest priority renders last (on top of the other frames)
+
+          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
           return () => {
-            set(({
-              internal
-            }) => ({
-              internal: { ...internal,
-                // Decrease manual flag if this subscription had a priority
-                priority: internal.priority - (priority > 0 ? 1 : 0),
-                // Remove subscriber from list
-                subscribers: internal.subscribers.filter(s => s.ref !== ref)
-              }
-            }));
+            const internal = get().internal;
+
+            if (internal != null && internal.subscribers) {
+              // Decrease manual flag if this subscription had a priority
+              internal.priority = internal.priority - (priority > 0 ? 1 : 0); // Remove subscriber from list
+
+              internal.subscribers = internal.subscribers.filter(s => s.ref !== ref);
+            }
           };
         }
       }
@@ -1371,7 +1386,7 @@ const createStore = (invalidate, advance) => {
       updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
-      gl.setSize(size.width, size.height);
+      gl.setSize(size.width, size.height, size.updateStyle);
       oldSize = size;
       oldDpr = viewport.dpr;
     }
@@ -1793,7 +1808,7 @@ function createRoot(canvas) {
         width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
         height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
       };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height); // Check frameloop
+      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
 
@@ -2013,7 +2028,7 @@ function Portal({
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
   rendererPackageName: '@react-three/fiber',
-  version: '18.0.0'
+  version: React.version
 });
 const act = React.unstable_act;
 

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

@@ -164,7 +164,7 @@ function dispose(obj) {
 function prepare(object, state) {
   const instance = object;
 
-  if (state != null && state.primitive || !instance.__r3f) {
+  if (!instance.__r3f) {
     instance.__r3f = {
       type: '',
       root: null,
@@ -173,7 +173,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parent: null,
+      parents: [],
       ...state
     };
   }
@@ -287,10 +287,10 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState;
+  var _instance$__r3f3, _root$getState, _localState$parents;
 
   // Filter equals, events and reserved props
-  const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+  const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
   const root = localState.root;
   const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
   const {
@@ -378,7 +378,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if ((_localState$parents = localState.parents) != null && _localState$parents.length && 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
@@ -480,7 +480,6 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
 
 function removeInteractivity(store, object) {
   const {
-    events,
     internal
   } = store.getState(); // Removes every trace of an object from the data store
 
@@ -707,14 +706,14 @@ function createEvents(store) {
     return intersections;
   }
 
-  function cancelPointer(hits) {
+  function cancelPointer(intersections) {
     const {
       internal
     } = store.getState();
     Array.from(internal.hovered.values()).forEach(hoveredObj => {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
-      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
+      if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
         const instance = eventObject.__r3f;
         const handlers = instance == null ? void 0 : instance.handlers;
@@ -723,7 +722,7 @@ function createEvents(store) {
         if (instance != null && instance.eventCount) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
-            intersections: hits || []
+            intersections
           };
           handlers.onPointerOut == null ? void 0 : handlers.onPointerOut(data);
           handlers.onPointerLeave == null ? void 0 : handlers.onPointerLeave(data);
@@ -926,7 +925,9 @@ 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.parent = parentInstance;
+
+      child.__r3f.parents.push(parentInstance);
+
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -938,9 +939,7 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f2, _parentInstance$__r3f2;
 
-      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
+      if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -953,7 +952,9 @@ 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.parent = parentInstance;
+
+      child.__r3f.parents.push(parentInstance);
+
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -968,7 +969,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // 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
 
@@ -1029,11 +1030,11 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _instance$__r3f2;
+    var _instance$__r3f, _newInstance$__r3f;
 
-    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
-    if (!parent) return;
-    const newInstance = createInstance(type, newProps, (_instance$__r3f2 = instance.__r3f) == null ? void 0 : _instance$__r3f2.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
+    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
+    if (!(parents != null && parents.length)) 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
     // This can not include primitives, which should not have declarative children
@@ -1041,18 +1042,34 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    }
+    } // Copy over child attachments
+
 
-    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
+    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 = [];
-    removeChild(parent, instance);
-    appendChild(parent, newInstance); // Re-bind event handlers
+
+    for (const parent of parents) {
+      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) {
@@ -1088,9 +1105,9 @@ function createRenderer(roots, getEventPriority) {
     getChildHostContext: parentHostContext => parentHostContext,
 
     finalizeInitialChildren(instance) {
-      var _instance$__r3f3;
+      var _instance$__r3f2;
 
-      const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // https://github.com/facebook/react/issues/20271
+      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;
@@ -1131,11 +1148,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     commitMount(instance, type, props, int) {
-      var _instance$__r3f4;
+      var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
       // This will make sure events are only added once to the central container
-      const localState = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
@@ -1143,7 +1160,9 @@ function createRenderer(roots, getEventPriority) {
 
 
       if (localState.attach) {
-        attach(localState.parent, instance, localState.attach);
+        for (const parent of localState.parents) {
+          attach(parent, instance, localState.attach);
+        }
       }
     },
 
@@ -1281,7 +1300,8 @@ const createStore = (invalidate, advance) => {
       },
       size: {
         width: 0,
-        height: 0
+        height: 0,
+        updateStyle: false
       },
       viewport: {
         initialDpr: 0,
@@ -1298,11 +1318,12 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height) => {
+      setSize: (width, height, updateStyle) => {
         const camera = get().camera;
         const size = {
           width,
-          height
+          height,
+          updateStyle
         };
         set(state => ({
           size,
@@ -1348,35 +1369,29 @@ const createStore = (invalidate, advance) => {
         initialHits: [],
         capturedMap: new Map(),
         subscribe: (ref, priority, store) => {
-          set(({
-            internal
-          }) => ({
-            internal: { ...internal,
-              // If this subscription was given a priority, it takes rendering into its own hands
-              // For that reason we switch off automatic rendering and increase the manual flag
-              // As long as this flag is positive there can be no internal rendering at all
-              // because there could be multiple render subscriptions
-              priority: internal.priority + (priority > 0 ? 1 : 0),
-              // Register subscriber and sort layers from lowest to highest, meaning,
-              // highest priority renders last (on top of the other frames)
-              subscribers: [...internal.subscribers, {
-                ref,
-                priority,
-                store
-              }].sort((a, b) => a.priority - b.priority)
-            }
-          }));
+          const internal = get().internal; // If this subscription was given a priority, it takes rendering into its own hands
+          // For that reason we switch off automatic rendering and increase the manual flag
+          // As long as this flag is positive there can be no internal rendering at all
+          // because there could be multiple render subscriptions
+
+          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+          internal.subscribers.push({
+            ref,
+            priority,
+            store
+          }); // Register subscriber and sort layers from lowest to highest, meaning,
+          // highest priority renders last (on top of the other frames)
+
+          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
           return () => {
-            set(({
-              internal
-            }) => ({
-              internal: { ...internal,
-                // Decrease manual flag if this subscription had a priority
-                priority: internal.priority - (priority > 0 ? 1 : 0),
-                // Remove subscriber from list
-                subscribers: internal.subscribers.filter(s => s.ref !== ref)
-              }
-            }));
+            const internal = get().internal;
+
+            if (internal != null && internal.subscribers) {
+              // Decrease manual flag if this subscription had a priority
+              internal.priority = internal.priority - (priority > 0 ? 1 : 0); // Remove subscriber from list
+
+              internal.subscribers = internal.subscribers.filter(s => s.ref !== ref);
+            }
           };
         }
       }
@@ -1398,7 +1413,7 @@ const createStore = (invalidate, advance) => {
       updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
-      gl.setSize(size.width, size.height);
+      gl.setSize(size.width, size.height, size.updateStyle);
       oldSize = size;
       oldDpr = viewport.dpr;
     }
@@ -1820,7 +1835,7 @@ function createRoot(canvas) {
         width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
         height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
       };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height); // Check frameloop
+      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
 
@@ -2040,7 +2055,7 @@ function Portal({
 reconciler.injectIntoDevTools({
   bundleType: 0 ,
   rendererPackageName: '@react-three/fiber',
-  version: '18.0.0'
+  version: React__namespace.version
 });
 const act = React__namespace.unstable_act;
 

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

@@ -164,7 +164,7 @@ function dispose(obj) {
 function prepare(object, state) {
   const instance = object;
 
-  if (state != null && state.primitive || !instance.__r3f) {
+  if (!instance.__r3f) {
     instance.__r3f = {
       type: '',
       root: null,
@@ -173,7 +173,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parent: null,
+      parents: [],
       ...state
     };
   }
@@ -287,10 +287,10 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState;
+  var _instance$__r3f3, _root$getState, _localState$parents;
 
   // Filter equals, events and reserved props
-  const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+  const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
   const root = localState.root;
   const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
   const {
@@ -378,7 +378,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if ((_localState$parents = localState.parents) != null && _localState$parents.length && 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
@@ -480,7 +480,6 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
 
 function removeInteractivity(store, object) {
   const {
-    events,
     internal
   } = store.getState(); // Removes every trace of an object from the data store
 
@@ -707,14 +706,14 @@ function createEvents(store) {
     return intersections;
   }
 
-  function cancelPointer(hits) {
+  function cancelPointer(intersections) {
     const {
       internal
     } = store.getState();
     Array.from(internal.hovered.values()).forEach(hoveredObj => {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
-      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
+      if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
         const instance = eventObject.__r3f;
         const handlers = instance == null ? void 0 : instance.handlers;
@@ -723,7 +722,7 @@ function createEvents(store) {
         if (instance != null && instance.eventCount) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
-            intersections: hits || []
+            intersections
           };
           handlers.onPointerOut == null ? void 0 : handlers.onPointerOut(data);
           handlers.onPointerLeave == null ? void 0 : handlers.onPointerLeave(data);
@@ -926,7 +925,9 @@ 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.parent = parentInstance;
+
+      child.__r3f.parents.push(parentInstance);
+
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -938,9 +939,7 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _child$__r3f2, _parentInstance$__r3f2;
 
-      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
+      if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
           type: 'added'
@@ -953,7 +952,9 @@ 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.parent = parentInstance;
+
+      child.__r3f.parents.push(parentInstance);
+
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -968,7 +969,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // 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
 
@@ -1029,11 +1030,11 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f, _instance$__r3f2;
+    var _instance$__r3f, _newInstance$__r3f;
 
-    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
-    if (!parent) return;
-    const newInstance = createInstance(type, newProps, (_instance$__r3f2 = instance.__r3f) == null ? void 0 : _instance$__r3f2.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
+    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
+    if (!(parents != null && parents.length)) 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
     // This can not include primitives, which should not have declarative children
@@ -1041,18 +1042,34 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    }
+    } // Copy over child attachments
+
 
-    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
+    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 = [];
-    removeChild(parent, instance);
-    appendChild(parent, newInstance); // Re-bind event handlers
+
+    for (const parent of parents) {
+      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) {
@@ -1088,9 +1105,9 @@ function createRenderer(roots, getEventPriority) {
     getChildHostContext: parentHostContext => parentHostContext,
 
     finalizeInitialChildren(instance) {
-      var _instance$__r3f3;
+      var _instance$__r3f2;
 
-      const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // https://github.com/facebook/react/issues/20271
+      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;
@@ -1131,11 +1148,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     commitMount(instance, type, props, int) {
-      var _instance$__r3f4;
+      var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
       // This will make sure events are only added once to the central container
-      const localState = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
 
       if (instance.raycast && localState.handlers && localState.eventCount) {
         instance.__r3f.root.getState().internal.interaction.push(instance);
@@ -1143,7 +1160,9 @@ function createRenderer(roots, getEventPriority) {
 
 
       if (localState.attach) {
-        attach(localState.parent, instance, localState.attach);
+        for (const parent of localState.parents) {
+          attach(parent, instance, localState.attach);
+        }
       }
     },
 
@@ -1281,7 +1300,8 @@ const createStore = (invalidate, advance) => {
       },
       size: {
         width: 0,
-        height: 0
+        height: 0,
+        updateStyle: false
       },
       viewport: {
         initialDpr: 0,
@@ -1298,11 +1318,12 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height) => {
+      setSize: (width, height, updateStyle) => {
         const camera = get().camera;
         const size = {
           width,
-          height
+          height,
+          updateStyle
         };
         set(state => ({
           size,
@@ -1348,35 +1369,29 @@ const createStore = (invalidate, advance) => {
         initialHits: [],
         capturedMap: new Map(),
         subscribe: (ref, priority, store) => {
-          set(({
-            internal
-          }) => ({
-            internal: { ...internal,
-              // If this subscription was given a priority, it takes rendering into its own hands
-              // For that reason we switch off automatic rendering and increase the manual flag
-              // As long as this flag is positive there can be no internal rendering at all
-              // because there could be multiple render subscriptions
-              priority: internal.priority + (priority > 0 ? 1 : 0),
-              // Register subscriber and sort layers from lowest to highest, meaning,
-              // highest priority renders last (on top of the other frames)
-              subscribers: [...internal.subscribers, {
-                ref,
-                priority,
-                store
-              }].sort((a, b) => a.priority - b.priority)
-            }
-          }));
+          const internal = get().internal; // If this subscription was given a priority, it takes rendering into its own hands
+          // For that reason we switch off automatic rendering and increase the manual flag
+          // As long as this flag is positive there can be no internal rendering at all
+          // because there could be multiple render subscriptions
+
+          internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+          internal.subscribers.push({
+            ref,
+            priority,
+            store
+          }); // Register subscriber and sort layers from lowest to highest, meaning,
+          // highest priority renders last (on top of the other frames)
+
+          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
           return () => {
-            set(({
-              internal
-            }) => ({
-              internal: { ...internal,
-                // Decrease manual flag if this subscription had a priority
-                priority: internal.priority - (priority > 0 ? 1 : 0),
-                // Remove subscriber from list
-                subscribers: internal.subscribers.filter(s => s.ref !== ref)
-              }
-            }));
+            const internal = get().internal;
+
+            if (internal != null && internal.subscribers) {
+              // Decrease manual flag if this subscription had a priority
+              internal.priority = internal.priority - (priority > 0 ? 1 : 0); // Remove subscriber from list
+
+              internal.subscribers = internal.subscribers.filter(s => s.ref !== ref);
+            }
           };
         }
       }
@@ -1398,7 +1413,7 @@ const createStore = (invalidate, advance) => {
       updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
-      gl.setSize(size.width, size.height);
+      gl.setSize(size.width, size.height, size.updateStyle);
       oldSize = size;
       oldDpr = viewport.dpr;
     }
@@ -1820,7 +1835,7 @@ function createRoot(canvas) {
         width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
         height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
       };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height); // Check frameloop
+      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
 
@@ -2040,7 +2055,7 @@ function Portal({
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
   rendererPackageName: '@react-three/fiber',
-  version: '18.0.0'
+  version: React__namespace.version
 });
 const act = React__namespace.unstable_act;
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-c937c162.cjs.dev.js');
+var index = require('./index-8e20caed.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -83,7 +83,7 @@ function createPointerEvents(store) {
           connected: target
         }
       }));
-      Object.entries((_events$handlers = events == null ? void 0 : events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
+      Object.entries((_events$handlers = events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
         const [eventName, passive] = DOM_EVENTS[name];
         target.addEventListener(eventName, event, {
           passive

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-e2e71da1.cjs.prod.js');
+var index = require('./index-786a40b6.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -83,7 +83,7 @@ function createPointerEvents(store) {
           connected: target
         }
       }));
-      Object.entries((_events$handlers = events == null ? void 0 : events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
+      Object.entries((_events$handlers = events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
         const [eventName, passive] = DOM_EVENTS[name];
         target.addEventListener(eventName, event, {
           passive

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-acedf326.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-acedf326.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-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 _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -56,7 +56,7 @@ function createPointerEvents(store) {
           connected: target
         }
       }));
-      Object.entries((_events$handlers = events == null ? void 0 : events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
+      Object.entries((_events$handlers = events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
         const [eventName, passive] = DOM_EVENTS[name];
         target.addEventListener(eventName, event, {
           passive

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-c937c162.cjs.dev.js');
+var index = require('../../dist/index-8e20caed.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -95,7 +95,7 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability__default["default"](events == null ? void 0 : events.handlers);
+      const connected = new Pressability__default["default"](events.handlers);
       set(state => ({
         events: { ...state.events,
           connected
@@ -286,7 +286,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       width,
       height
     });
-  }, []);
+  }, []); // Called on context create or swap
+  // https://github.com/pmndrs/react-three-fiber/pull/2297
+
   const onContextCreate = React__namespace.useCallback(context => {
     const canvasShim = {
       width: context.drawingBufferWidth,
@@ -297,11 +299,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       clientHeight: context.drawingBufferHeight,
       getContext: () => context
     };
+    root.current = index.createRoot(canvasShim);
     setCanvas(canvasShim);
   }, []);
 
-  if (width > 0 && height > 0 && canvas) {
-    if (!root.current) root.current = index.createRoot(canvas);
+  if (root.current && width > 0 && height > 0) {
     root.current.configure({
       gl,
       events,

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-e2e71da1.cjs.prod.js');
+var index = require('../../dist/index-786a40b6.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -95,7 +95,7 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability__default["default"](events == null ? void 0 : events.handlers);
+      const connected = new Pressability__default["default"](events.handlers);
       set(state => ({
         events: { ...state.events,
           connected
@@ -286,7 +286,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       width,
       height
     });
-  }, []);
+  }, []); // Called on context create or swap
+  // https://github.com/pmndrs/react-three-fiber/pull/2297
+
   const onContextCreate = React__namespace.useCallback(context => {
     const canvasShim = {
       width: context.drawingBufferWidth,
@@ -297,11 +299,11 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       clientHeight: context.drawingBufferHeight,
       getContext: () => context
     };
+    root.current = index.createRoot(canvasShim);
     setCanvas(canvasShim);
   }, []);
 
-  if (width > 0 && height > 0 && canvas) {
-    if (!root.current) root.current = index.createRoot(canvas);
+  if (root.current && width > 0 && height > 0) {
     root.current.configure({
       gl,
       events,

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-acedf326.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-acedf326.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-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 _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -68,7 +68,7 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability(events == null ? void 0 : events.handlers);
+      const connected = new Pressability(events.handlers);
       set(state => ({
         events: { ...state.events,
           connected
@@ -259,7 +259,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       width,
       height
     });
-  }, []);
+  }, []); // Called on context create or swap
+  // https://github.com/pmndrs/react-three-fiber/pull/2297
+
   const onContextCreate = React.useCallback(context => {
     const canvasShim = {
       width: context.drawingBufferWidth,
@@ -270,11 +272,11 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       clientHeight: context.drawingBufferHeight,
       getContext: () => context
     };
+    root.current = createRoot(canvasShim);
     setCanvas(canvasShim);
   }, []);
 
-  if (width > 0 && height > 0 && canvas) {
-    if (!root.current) root.current = createRoot(canvas);
+  if (root.current && width > 0 && height > 0) {
     root.current.configure({
       gl,
       events,

package/package.json

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