@react-three/fiber 8.0.9 → 8.0.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.0.10
+
+### Patch Changes
+
+- eb321afd: fix: remount bug, allow portals to inject custom size
+
 ## 8.0.9
 
 ### Patch Changes

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

@@ -3,11 +3,11 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { UseBoundStore } from 'zustand';
 import * as ReactThreeFiber from '../three-types';
-import { Renderer, context, RootState, Size, Camera, Dpr, Performance } from './store';
+import { Renderer, context, RootState, Size, Dpr, Performance } from './store';
 import { extend, Root } from './renderer';
 import { addEffect, addAfterEffect, addTail } from './loop';
 import { EventManager, ComputeFunction } from './events';
-import { dispose, getRootState } from './utils';
+import { dispose, getRootState, Camera } from './utils';
 declare const roots: Map<Element, Root>;
 declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void;
 declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: typeof import("./utils").applyProps;
@@ -42,13 +42,17 @@ export declare type ReconcilerRoot<TCanvas extends Element> = {
 declare function createRoot<TCanvas extends Element>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
 declare function render<TCanvas extends Element>(children: React.ReactNode, canvas: TCanvas, config: RenderProps<TCanvas>): UseBoundStore<RootState>;
 declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
-export declare type InjectState = Partial<Omit<RootState, 'set' | 'get' | 'setSize' | 'setFrameloop' | 'setDpr' | 'events' | 'invalidate' | 'advance' | 'performance' | 'internal'> & {
-    events: {
+export declare type InjectState = Partial<Omit<RootState, 'set' | 'get' | 'setSize' | 'setFrameloop' | 'setDpr' | 'events' | 'invalidate' | 'advance' | 'performance' | 'internal' | 'size' | 'viewport'> & {
+    events?: {
         enabled?: boolean;
         priority?: number;
         compute?: ComputeFunction;
         connected?: any;
     };
+    size?: {
+        width: number;
+        height: number;
+    };
 }>;
 declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.ReactNode;
 declare const act: any;

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

@@ -2,6 +2,7 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { GetState, SetState, StoreApi, UseBoundStore } from 'zustand';
 import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
+import { Camera } from './utils';
 export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
 }
@@ -22,7 +23,6 @@ export declare type Viewport = Size & {
     distance: number;
     aspect: number;
 };
-export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
 export declare type RenderCallback = (state: RootState, delta: number, frame?: THREE.XRFrame) => void;
 export declare type Performance = {
     current: number;
@@ -35,7 +35,6 @@ export declare type Renderer = {
     render: (scene: THREE.Scene, camera: THREE.Camera) => any;
 };
 export declare const isRenderer: (def: any) => boolean;
-export declare const isOrthographicCamera: (def: any) => def is THREE.OrthographicCamera;
 export declare type InternalState = {
     active: boolean;
     priority: number;

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

@@ -1,7 +1,9 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { AttachType, Instance, InstanceProps, LocalState } from './renderer';
-import { Dpr, RootState } from './store';
+import { Dpr, RootState, Size } from './store';
+export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
+export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
 export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
 export declare type SetBlock = false | Promise<null> | null;
@@ -78,3 +80,6 @@ export declare function diffProps(instance: Instance, { children: cN, key: kN, r
 export declare function applyProps(instance: Instance, data: InstanceProps | DiffSet): Instance;
 export declare function invalidateInstance(instance: Instance): void;
 export declare function updateInstance(instance: Instance): void;
+export declare function updateCamera(camera: Camera & {
+    manual?: boolean;
+}, size: Size): void;

package/dist/declarations/src/index.d.ts

@@ -2,9 +2,9 @@ export * from './three-types';
 import * as ReactThreeFiber from './three-types';
 export { ReactThreeFiber };
 export type { BaseInstance, LocalState } from './core/renderer';
-export type { Intersection, Subscription, Dpr, Size, Viewport, Camera, RenderCallback, Performance, RootState, } from './core/store';
-export type { ThreeEvent, Events, EventManager } from './core/events';
-export type { ObjectMap } from './core/utils';
+export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, Performance, RootState, } from './core/store';
+export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
+export type { ObjectMap, Camera } from './core/utils';
 export * from './web/Canvas';
 export { createPointerEvents as events } from './web/events';
 export * from './core';

package/dist/declarations/src/native.d.ts

@@ -2,9 +2,9 @@ export * from './three-types';
 import * as ReactThreeFiber from './three-types';
 export { ReactThreeFiber };
 export type { BaseInstance, LocalState } from './core/renderer';
-export type { Intersection, Subscription, Dpr, Size, Viewport, Camera, RenderCallback, Performance, RootState, } from './core/store';
-export type { ThreeEvent, Events, EventManager } from './core/events';
-export type { ObjectMap } from './core/utils';
+export type { Intersection, Subscription, Dpr, Size, Viewport, RenderCallback, Performance, RootState, } from './core/store';
+export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events';
+export type { ObjectMap, Camera } from './core/utils';
 export * from './native/Canvas';
 export { createTouchEvents as events } from './native/events';
 export * from './core';

package/dist/{index-49237346.cjs.dev.js → index-018d2d45.cjs.dev.js}

@@ -39,9 +39,10 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// React currently throws a warning when using useLayoutEffect on the server.
+const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect on the client.
+
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
 function useMutableCallback(fn) {
@@ -416,6 +417,25 @@ function invalidateInstance(instance) {
 function updateInstance(instance) {
   instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
 }
+function updateCamera(camera, size) {
+  // https://github.com/pmndrs/react-three-fiber/issues/92
+  // Do not mess with the camera if it belongs to the user
+  if (!camera.manual) {
+    if (isOrthographicCamera(camera)) {
+      camera.left = size.width / -2;
+      camera.right = size.width / 2;
+      camera.top = size.height / 2;
+      camera.bottom = size.height / -2;
+    } else {
+      camera.aspect = size.width / size.height;
+    }
+
+    camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+    // Update matrix world since the renderer is a frame late
+
+    camera.updateMatrixWorld();
+  }
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -1189,7 +1209,6 @@ function createRenderer(roots, getEventPriority) {
 }
 
 const isRenderer = def => !!(def != null && def.render);
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
 const createStore = (invalidate, advance) => {
@@ -1396,24 +1415,7 @@ const createStore = (invalidate, advance) => {
     } = rootState.getState();
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
-      // https://github.com/pmndrs/react-three-fiber/issues/92
-      // Do not mess with the camera if it belongs to the user
-      if (!camera.manual) {
-        if (isOrthographicCamera(camera)) {
-          camera.left = size.width / -2;
-          camera.right = size.width / 2;
-          camera.top = size.height / 2;
-          camera.bottom = size.height / -2;
-        } else {
-          camera.aspect = size.width / size.height;
-        }
-
-        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-        // Update matrix world since the renderer is a frame late
-
-        camera.updateMatrixWorld();
-      } // Update renderer
-
+      updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height);
@@ -1952,6 +1954,7 @@ function Portal({
    *    {createPortal(...)} */
   const {
     events,
+    size,
     ...rest
   } = state;
   const previousRoot = useStore();
@@ -1963,45 +1966,79 @@ function Portal({
 
     if (injectState) {
       // Only the fields of "state" that do not differ from injectState
+      // Some props should be off-limits
+      // Otherwise filter out the props that are different and let the inject layer take precedence
       Object.keys(state).forEach(key => {
-        if ( // Some props should be off-limits
-        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
-        state[key] !== injectState[key]) delete intersect[key];
+        if (state[key] !== injectState[key] && !['internal', 'performance'].includes(key)) {
+          delete intersect[key];
+        }
       });
     }
 
-    return { ...intersect,
+    let viewport = undefined;
+
+    if (injectState && size) {
+      const camera = injectState.camera; // Calculate the override viewport, if present
+
+      viewport = state.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+
+      if (camera !== state.camera) updateCamera(camera, size);
+    }
+
+    return { // The intersect consists of the previous root state
+      ...intersect,
+      // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
-      previousRoot,
       raycaster,
+      pointer,
+      mouse: pointer,
+      // Their previous root is the layer before it
+      previousRoot,
+      // Events, size and viewport can be overridden by the inject layer
       events: { ...state.events,
         ...(injectState == null ? void 0 : injectState.events),
-        pointer,
-        mouse: pointer,
         ...events
       },
+      size: { ...state.size,
+        ...size
+      },
+      viewport: { ...state.viewport,
+        ...viewport
+      },
       ...rest
     };
   }, [state]);
-  const [useInjectStore] = React__namespace.useState(() => {
-    const store = create__default['default']((set, get) => ({ ...inject(previousRoot.getState()),
+  const [usePortalStore] = React__namespace.useState(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
+    new THREE__namespace.Vector3();
+    const previousState = previousRoot.getState();
+    const store = create__default['default']((set, get) => ({ ...inject(previousState),
+      // Set and get refer to this root-state
       set,
       get,
+      // Layers are allowed to override events
       setEvents: events => set(state => ({ ...state,
         events: { ...state.events,
           ...events
         }
       }))
     }));
-    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
     return store;
   });
   React__namespace.useEffect(() => {
-    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
+    const unsub = previousRoot.subscribe(prev => usePortalStore.setState(state => inject(prev, state)));
+    return () => {
+      unsub();
+      usePortalStore.destroy();
+    };
+  }, []);
+  React__namespace.useEffect(() => {
+    usePortalStore.setState(injectState => inject(previousRoot.getState(), injectState));
   }, [inject]);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: useInjectStore
-  }, children), useInjectStore, null));
+    value: usePortalStore
+  }, children), usePortalStore, null));
 }
 
 reconciler.injectIntoDevTools({

package/dist/{index-4e14a95b.esm.js → index-91152509.esm.js}

@@ -10,9 +10,10 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// React currently throws a warning when using useLayoutEffect on the server.
+const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect on the client.
+
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
 function useMutableCallback(fn) {
@@ -387,6 +388,25 @@ function invalidateInstance(instance) {
 function updateInstance(instance) {
   instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
 }
+function updateCamera(camera, size) {
+  // https://github.com/pmndrs/react-three-fiber/issues/92
+  // Do not mess with the camera if it belongs to the user
+  if (!camera.manual) {
+    if (isOrthographicCamera(camera)) {
+      camera.left = size.width / -2;
+      camera.right = size.width / 2;
+      camera.top = size.height / 2;
+      camera.bottom = size.height / -2;
+    } else {
+      camera.aspect = size.width / size.height;
+    }
+
+    camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+    // Update matrix world since the renderer is a frame late
+
+    camera.updateMatrixWorld();
+  }
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -1160,7 +1180,6 @@ function createRenderer(roots, getEventPriority) {
 }
 
 const isRenderer = def => !!(def != null && def.render);
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React.createContext(null);
 
 const createStore = (invalidate, advance) => {
@@ -1367,24 +1386,7 @@ const createStore = (invalidate, advance) => {
     } = rootState.getState();
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
-      // https://github.com/pmndrs/react-three-fiber/issues/92
-      // Do not mess with the camera if it belongs to the user
-      if (!camera.manual) {
-        if (isOrthographicCamera(camera)) {
-          camera.left = size.width / -2;
-          camera.right = size.width / 2;
-          camera.top = size.height / 2;
-          camera.bottom = size.height / -2;
-        } else {
-          camera.aspect = size.width / size.height;
-        }
-
-        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-        // Update matrix world since the renderer is a frame late
-
-        camera.updateMatrixWorld();
-      } // Update renderer
-
+      updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height);
@@ -1923,6 +1925,7 @@ function Portal({
    *    {createPortal(...)} */
   const {
     events,
+    size,
     ...rest
   } = state;
   const previousRoot = useStore();
@@ -1934,45 +1937,79 @@ function Portal({
 
     if (injectState) {
       // Only the fields of "state" that do not differ from injectState
+      // Some props should be off-limits
+      // Otherwise filter out the props that are different and let the inject layer take precedence
       Object.keys(state).forEach(key => {
-        if ( // Some props should be off-limits
-        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
-        state[key] !== injectState[key]) delete intersect[key];
+        if (state[key] !== injectState[key] && !['internal', 'performance'].includes(key)) {
+          delete intersect[key];
+        }
       });
     }
 
-    return { ...intersect,
+    let viewport = undefined;
+
+    if (injectState && size) {
+      const camera = injectState.camera; // Calculate the override viewport, if present
+
+      viewport = state.viewport.getCurrentViewport(camera, new THREE.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+
+      if (camera !== state.camera) updateCamera(camera, size);
+    }
+
+    return { // The intersect consists of the previous root state
+      ...intersect,
+      // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
-      previousRoot,
       raycaster,
+      pointer,
+      mouse: pointer,
+      // Their previous root is the layer before it
+      previousRoot,
+      // Events, size and viewport can be overridden by the inject layer
       events: { ...state.events,
         ...(injectState == null ? void 0 : injectState.events),
-        pointer,
-        mouse: pointer,
         ...events
       },
+      size: { ...state.size,
+        ...size
+      },
+      viewport: { ...state.viewport,
+        ...viewport
+      },
       ...rest
     };
   }, [state]);
-  const [useInjectStore] = React.useState(() => {
-    const store = create((set, get) => ({ ...inject(previousRoot.getState()),
+  const [usePortalStore] = React.useState(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
+    new THREE.Vector3();
+    const previousState = previousRoot.getState();
+    const store = create((set, get) => ({ ...inject(previousState),
+      // Set and get refer to this root-state
       set,
       get,
+      // Layers are allowed to override events
       setEvents: events => set(state => ({ ...state,
         events: { ...state.events,
           ...events
         }
       }))
     }));
-    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
     return store;
   });
   React.useEffect(() => {
-    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
+    const unsub = previousRoot.subscribe(prev => usePortalStore.setState(state => inject(prev, state)));
+    return () => {
+      unsub();
+      usePortalStore.destroy();
+    };
+  }, []);
+  React.useEffect(() => {
+    usePortalStore.setState(injectState => inject(previousRoot.getState(), injectState));
   }, [inject]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, reconciler.createPortal( /*#__PURE__*/React.createElement(context.Provider, {
-    value: useInjectStore
-  }, children), useInjectStore, null));
+    value: usePortalStore
+  }, children), usePortalStore, null));
 }
 
 reconciler.injectIntoDevTools({

package/dist/{index-4dae9cc6.cjs.prod.js → index-c8c0474b.cjs.prod.js}

@@ -39,9 +39,10 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// React currently throws a warning when using useLayoutEffect on the server.
+const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect on the client.
+
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
 function useMutableCallback(fn) {
@@ -416,6 +417,25 @@ function invalidateInstance(instance) {
 function updateInstance(instance) {
   instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
 }
+function updateCamera(camera, size) {
+  // https://github.com/pmndrs/react-three-fiber/issues/92
+  // Do not mess with the camera if it belongs to the user
+  if (!camera.manual) {
+    if (isOrthographicCamera(camera)) {
+      camera.left = size.width / -2;
+      camera.right = size.width / 2;
+      camera.top = size.height / 2;
+      camera.bottom = size.height / -2;
+    } else {
+      camera.aspect = size.width / size.height;
+    }
+
+    camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+    // Update matrix world since the renderer is a frame late
+
+    camera.updateMatrixWorld();
+  }
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -1189,7 +1209,6 @@ function createRenderer(roots, getEventPriority) {
 }
 
 const isRenderer = def => !!(def != null && def.render);
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
 const createStore = (invalidate, advance) => {
@@ -1396,24 +1415,7 @@ const createStore = (invalidate, advance) => {
     } = rootState.getState();
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
-      // https://github.com/pmndrs/react-three-fiber/issues/92
-      // Do not mess with the camera if it belongs to the user
-      if (!camera.manual) {
-        if (isOrthographicCamera(camera)) {
-          camera.left = size.width / -2;
-          camera.right = size.width / 2;
-          camera.top = size.height / 2;
-          camera.bottom = size.height / -2;
-        } else {
-          camera.aspect = size.width / size.height;
-        }
-
-        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-        // Update matrix world since the renderer is a frame late
-
-        camera.updateMatrixWorld();
-      } // Update renderer
-
+      updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height);
@@ -1952,6 +1954,7 @@ function Portal({
    *    {createPortal(...)} */
   const {
     events,
+    size,
     ...rest
   } = state;
   const previousRoot = useStore();
@@ -1963,45 +1966,79 @@ function Portal({
 
     if (injectState) {
       // Only the fields of "state" that do not differ from injectState
+      // Some props should be off-limits
+      // Otherwise filter out the props that are different and let the inject layer take precedence
       Object.keys(state).forEach(key => {
-        if ( // Some props should be off-limits
-        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
-        state[key] !== injectState[key]) delete intersect[key];
+        if (state[key] !== injectState[key] && !['internal', 'performance'].includes(key)) {
+          delete intersect[key];
+        }
       });
     }
 
-    return { ...intersect,
+    let viewport = undefined;
+
+    if (injectState && size) {
+      const camera = injectState.camera; // Calculate the override viewport, if present
+
+      viewport = state.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+
+      if (camera !== state.camera) updateCamera(camera, size);
+    }
+
+    return { // The intersect consists of the previous root state
+      ...intersect,
+      // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
-      previousRoot,
       raycaster,
+      pointer,
+      mouse: pointer,
+      // Their previous root is the layer before it
+      previousRoot,
+      // Events, size and viewport can be overridden by the inject layer
       events: { ...state.events,
         ...(injectState == null ? void 0 : injectState.events),
-        pointer,
-        mouse: pointer,
         ...events
       },
+      size: { ...state.size,
+        ...size
+      },
+      viewport: { ...state.viewport,
+        ...viewport
+      },
       ...rest
     };
   }, [state]);
-  const [useInjectStore] = React__namespace.useState(() => {
-    const store = create__default['default']((set, get) => ({ ...inject(previousRoot.getState()),
+  const [usePortalStore] = React__namespace.useState(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
+    new THREE__namespace.Vector3();
+    const previousState = previousRoot.getState();
+    const store = create__default['default']((set, get) => ({ ...inject(previousState),
+      // Set and get refer to this root-state
       set,
       get,
+      // Layers are allowed to override events
       setEvents: events => set(state => ({ ...state,
         events: { ...state.events,
           ...events
         }
       }))
     }));
-    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
     return store;
   });
   React__namespace.useEffect(() => {
-    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
+    const unsub = previousRoot.subscribe(prev => usePortalStore.setState(state => inject(prev, state)));
+    return () => {
+      unsub();
+      usePortalStore.destroy();
+    };
+  }, []);
+  React__namespace.useEffect(() => {
+    usePortalStore.setState(injectState => inject(previousRoot.getState(), injectState));
   }, [inject]);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: useInjectStore
-  }, children), useInjectStore, null));
+    value: usePortalStore
+  }, children), usePortalStore, null));
 }
 
 reconciler.injectIntoDevTools({

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-49237346.cjs.dev.js');
+var index = require('./index-018d2d45.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -149,8 +149,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     },
     ...resize
   });
-  const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
+  const meshRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const canvasProps = index.pick(props, CANVAS_PROPS);
@@ -191,8 +191,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     setCanvas(canvasRef.current);
   }, []);
   React__namespace.useEffect(() => {
-    return () => index.unmountComponentAtNode(canvas);
-  }, []);
+    if (canvas) return () => index.unmountComponentAtNode(canvas);
+  }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: mergeRefs__default['default']([meshRef, containerRef]),
     style: {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-4dae9cc6.cjs.prod.js');
+var index = require('./index-c8c0474b.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -149,8 +149,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     },
     ...resize
   });
-  const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
+  const meshRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const canvasProps = index.pick(props, CANVAS_PROPS);
@@ -191,8 +191,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     setCanvas(canvasRef.current);
   }, []);
   React__namespace.useEffect(() => {
-    return () => index.unmountComponentAtNode(canvas);
-  }, []);
+    if (canvas) return () => index.unmountComponentAtNode(canvas);
+  }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: mergeRefs__default['default']([meshRef, containerRef]),
     style: {

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-4e14a95b.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from './index-4e14a95b.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-91152509.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from './index-91152509.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -119,8 +119,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     },
     ...resize
   });
-  const meshRef = React.useRef(null);
   const canvasRef = React.useRef(null);
+  const meshRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const canvasProps = pick(props, CANVAS_PROPS);
@@ -161,8 +161,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     setCanvas(canvasRef.current);
   }, []);
   React.useEffect(() => {
-    return () => unmountComponentAtNode(canvas);
-  }, []);
+    if (canvas) return () => unmountComponentAtNode(canvas);
+  }, [canvas]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs([meshRef, containerRef]),
     style: {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-49237346.cjs.dev.js');
+var index = require('../../dist/index-018d2d45.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -229,8 +229,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }
 
   React__namespace.useEffect(() => {
-    return () => index.unmountComponentAtNode(canvas);
-  }, []);
+    if (canvas) {
+      return () => index.unmountComponentAtNode(canvas);
+    }
+  }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
     ref: mergeRefs__default['default']([viewRef, forwardedRef]),
     onLayout: onLayout,

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-4dae9cc6.cjs.prod.js');
+var index = require('../../dist/index-c8c0474b.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -229,8 +229,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }
 
   React__namespace.useEffect(() => {
-    return () => index.unmountComponentAtNode(canvas);
-  }, []);
+    if (canvas) {
+      return () => index.unmountComponentAtNode(canvas);
+    }
+  }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
     ref: mergeRefs__default['default']([viewRef, forwardedRef]),
     onLayout: onLayout,

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

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { Asset } from 'expo-asset';
-import { c as createEvents, e as extend, u as useMutableCallback, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-4e14a95b.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from '../../dist/index-4e14a95b.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-91152509.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from '../../dist/index-91152509.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import mergeRefs from 'react-merge-refs';
@@ -199,8 +199,10 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   }
 
   React.useEffect(() => {
-    return () => unmountComponentAtNode(canvas);
-  }, []);
+    if (canvas) {
+      return () => unmountComponentAtNode(canvas);
+    }
+  }, [canvas]);
   return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
     ref: mergeRefs([viewRef, forwardedRef]),
     onLayout: onLayout,

package/package.json

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