@react-three/fiber 9.8.1 → 9.8.2

package/dist/{events-9ce18a08.esm.js → events-e51d7528.esm.js}

@@ -4,21 +4,13 @@ import * as THREE from 'three';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { suspend, preload, clear } from 'suspend-react';
-import w1, { unstable_getCurrentPriorityLevel, unstable_IdlePriority, unstable_LowPriority, unstable_NormalPriority, unstable_UserBlockingPriority, unstable_ImmediatePriority, unstable_scheduleCallback } from 'scheduler';
 import { useFiber, useContextBridge, traverseFiber, useActivityBridge as useActivityBridge$1 } from 'its-fine';
+import w1, { unstable_getCurrentPriorityLevel, unstable_IdlePriority, unstable_LowPriority, unstable_NormalPriority, unstable_UserBlockingPriority, unstable_ImmediatePriority, unstable_scheduleCallback } from 'scheduler';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-/**
- * Returns the instance's initial (outmost) root.
- */
-function findInitialRoot(instance) {
-  let root = instance.root;
-  while (root.getState().previousRoot) root = root.getState().previousRoot;
-  return root;
-}
 /**
  * Safely flush async effects when testing, simulating a legacy root.
  * @deprecated Import from React instead. import { act } from 'react'
@@ -26,9 +18,6 @@ function findInitialRoot(instance) {
 // Reference with computed key to break Webpack static analysis
 // https://github.com/webpack/webpack/issues/14814
 const act = React['act' + ''];
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
-const isRef = obj => obj && obj.hasOwnProperty('current');
-const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
 /**
  * An SSR-friendly useLayoutEffect.
@@ -45,7 +34,6 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
-const noop = () => {};
 function Gate({
   promise,
   onSettled
@@ -60,7 +48,7 @@ function useGate() {
   const [promise, setPromise] = React.useState(null);
   const onSettled = React.useCallback(() => setPromise(null), []);
   // Keep the first promise, or a repeated call would loop
-  const waitFor = React.useCallback(next => setPromise(current => current != null ? current : Promise.resolve(next).then(noop, noop)), []);
+  const waitFor = React.useCallback(next => setPromise(current => current != null ? current : Promise.resolve(next).then(() => {}, () => {})), []);
   const gate = promise ? /*#__PURE__*/jsx(React.Suspense, {
     fallback: null,
     children: /*#__PURE__*/jsx(Gate, {
@@ -121,6 +109,19 @@ const ErrorBoundary = /* @__PURE__ */(_ErrorBoundary => (_ErrorBoundary = class
 }, _ErrorBoundary.getDerivedStateFromError = () => ({
   error: true
 }), _ErrorBoundary))();
+
+/**
+ * Returns the instance's initial (outmost) root.
+ */
+function findInitialRoot(instance) {
+  let root = instance.root;
+  while (root.getState().previousRoot) root = root.getState().previousRoot;
+  return root;
+}
+const isOrthographicCamera = def => def && def.isOrthographicCamera;
+const isRef = obj => obj && obj.hasOwnProperty('current');
+const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
+const noop = () => {};
 function calculateDpr(dpr) {
   var _window$devicePixelRa;
   // Err on the side of progress by assuming 2x dpr if we can't detect it
@@ -129,6 +130,43 @@ function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 
+/**
+ * Calls `onChange` whenever window.devicePixelRatio changes: moving to another display or zooming.
+ * Neither resizes the canvas, so resize observers won't see it. A resolution query only matches the
+ * current ratio, so it is re-created after every change. Returns the unsubscribe function.
+ */
+function watchDpr(onChange) {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function' || !window.devicePixelRatio) {
+    return () => {};
+  }
+
+  // Partial matchMedia polyfills (test setups, older environments) may return no listener methods,
+  // or throw on a query they can't parse. Following the ratio is best-effort: it runs inside
+  // configuration, which must not fail because of it
+  let query;
+  const listen = () => {
+    try {
+      var _query, _query2;
+      query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      if (typeof ((_query = query) == null ? void 0 : _query.addEventListener) === 'function') query.addEventListener('change', handleChange);else (_query2 = query) == null ? void 0 : _query2.addListener == null ? void 0 : _query2.addListener(handleChange);
+    } catch {
+      query = undefined;
+    }
+  };
+  const unlisten = () => {
+    var _query3, _query4;
+    if (typeof ((_query3 = query) == null ? void 0 : _query3.removeEventListener) === 'function') query.removeEventListener('change', handleChange);else (_query4 = query) == null ? void 0 : _query4.removeListener == null ? void 0 : _query4.removeListener(handleChange);
+    query = undefined;
+  };
+  const handleChange = () => {
+    unlisten();
+    listen();
+    onChange();
+  };
+  listen();
+  return unlisten;
+}
+
 /**
  * Returns instance root state
  */
@@ -578,11 +616,24 @@ function swapInteractivity(store, object, newObject) {
       internal.hovered.set(makeId(next), next);
     }
   });
+
+  // A capture is keyed by its eventObject, but it also carries the intersection that is replayed into
+  // every subsequent event. Both must follow the new instance, or the capture resolves to the discarded object.
   internal.capturedMap.forEach(captures => {
-    const captureData = captures.get(object);
-    if (captureData) {
-      captures.delete(object);
-      captures.set(newObject, captureData);
+    for (const [key, captureData] of Array.from(captures)) {
+      const {
+        intersection
+      } = captureData;
+      if (key !== object && intersection.object !== object && intersection.eventObject !== object) continue;
+      if (key === object) captures.delete(key);
+      captures.set(key === object ? newObject : key, {
+        ...captureData,
+        intersection: {
+          ...intersection,
+          object: intersection.object === object ? newObject : intersection.object,
+          eventObject: intersection.eventObject === object ? newObject : intersection.eventObject
+        }
+      });
     }
   });
 }
@@ -981,7 +1032,109 @@ function createEvents(store) {
   };
 }
 
+const isPromiseLike = value => typeof (value == null ? void 0 : value.then) === 'function';
+
+/** A promise tagged with its state, the protocol React's `use` reads */
+
+const fulfilled = value => Object.assign(Promise.resolve(value), {
+  status: 'fulfilled',
+  value
+});
+const rejected = reason => {
+  const promise = Promise.reject(reason);
+  promise.catch(() => {}); // the reason is read from `status`
+  return Object.assign(promise, {
+    status: 'rejected',
+    reason
+  });
+};
+
+/** A pending promise, settled once from outside. Its `status` updates the moment it settles */
+const deferred = () => {
+  let resolve;
+  let reject;
+  const promise = new Promise((yes, no) => {
+    resolve = value => {
+      Object.assign(promise, {
+        status: 'fulfilled',
+        value
+      });
+      yes(value);
+    };
+    reject = reason => {
+      Object.assign(promise, {
+        status: 'rejected',
+        reason
+      });
+      no(reason);
+    };
+  });
+  promise.status = 'pending';
+  promise.catch(() => {}); // the reason is read from `status`
+  return {
+    promise,
+    resolve,
+    reject
+  };
+};
+
+/** Renderer creation and resource release. Root lifetime decides when release is safe. */
 const isRenderer = def => !!(def != null && def.render);
+
+/** The renderer to configure, or a promise for one from an async factory */
+function createRenderer(canvas, gl) {
+  const defaults = {
+    canvas,
+    powerPreference: 'high-performance',
+    antialias: true,
+    alpha: true
+  };
+  if (typeof gl === 'function') return gl(defaults);
+  if (isRenderer(gl)) return gl;
+  return new THREE.WebGLRenderer({
+    ...defaults,
+    ...gl
+  });
+}
+
+/**
+ * Frees a renderer R3F built. WebGLRenderer.dispose() releases programs and caches but keeps its
+ * context until garbage collection, and browsers cap live WebGL contexts, so the context is lost
+ * after it. A WebGPURenderer (from a factory) releases its device and context inside dispose().
+ */
+function disposeRenderer(gl) {
+  // Avoid starting initialization through three's dispose(). A factory must await init()
+  // before returning its renderer so readiness includes initialization and teardown can wait.
+  if ((gl.hasInitialized == null ? void 0 : gl.hasInitialized()) === false) return;
+  const disposed = attempt$1(() => {
+    var _gl$renderLists;
+    return gl.dispose ? gl.dispose() : (_gl$renderLists = gl.renderLists) == null ? void 0 : _gl$renderLists.dispose == null ? void 0 : _gl$renderLists.dispose();
+  });
+  // WebGPURenderer.dispose() is async from three r186
+  if (isPromiseLike(disposed)) {
+    return Promise.resolve(disposed).catch(error => console.warn('[R3F] Error disposing renderer', error)).then(() => attempt$1(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss()));
+  }
+  attempt$1(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss());
+}
+
+/** Owned renderers are disposed. Caller-provided renderers release caches and their context. */
+function releaseRenderer(gl, owned) {
+  if (!gl) return;
+  if (owned) return disposeRenderer(gl);
+  attempt$1(() => {
+    var _gl$renderLists2;
+    return (_gl$renderLists2 = gl.renderLists) == null ? void 0 : _gl$renderLists2.dispose == null ? void 0 : _gl$renderLists2.dispose();
+  });
+  attempt$1(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss());
+}
+function attempt$1(step) {
+  try {
+    return step();
+  } catch (error) {
+    console.warn('[R3F] Error while unmounting root; teardown may be incomplete:', error);
+  }
+}
+
 const context = /* @__PURE__ */React.createContext(null);
 const createStore = (invalidate, advance) => {
   const rootStore = createWithEqualityFn((set, get) => {
@@ -1276,7 +1429,7 @@ function useGraph(object) {
   return React.useMemo(() => buildGraph(object), [object]);
 }
 const memoizedLoaders = new WeakMap();
-const isConstructor$1 = value => {
+const isConstructor = value => {
   var _value$prototype;
   return typeof value === 'function' && (value == null ? void 0 : (_value$prototype = value.prototype) == null ? void 0 : _value$prototype.constructor) === value;
 };
@@ -1285,7 +1438,7 @@ function loadingFn(extensions, onProgress) {
     let loader;
 
     // Construct and cache loader if constructor was passed
-    if (isConstructor$1(Proto)) {
+    if (isConstructor(Proto)) {
       loader = memoizedLoaders.get(Proto);
       if (!loader) {
         loader = new Proto();
@@ -1360,22 +1513,6 @@ useLoader.clear = function (loader, input) {
 const shallow = {
   objects: 'shallow'
 };
-
-/** The renderer to configure, or a promise for one from an async factory */
-function createRenderer(canvas, gl) {
-  const defaults = {
-    canvas,
-    powerPreference: 'high-performance',
-    antialias: true,
-    alpha: true
-  };
-  if (typeof gl === 'function') return gl(defaults);
-  if (isRenderer(gl)) return gl;
-  return new THREE.WebGLRenderer({
-    ...defaults,
-    ...gl
-  });
-}
 function computeInitialSize(canvas, size) {
   if (!size && typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
     const {
@@ -1623,55 +1760,43 @@ function applyRootConfiguration({
   configuration.previous = next;
 }
 
-const isPromiseLike = value => typeof (value == null ? void 0 : value.then) === 'function';
-
-/** A promise tagged with its state, the protocol React's `use` reads */
-
-const fulfilled = value => Object.assign(Promise.resolve(value), {
-  status: 'fulfilled',
-  value
-});
-const rejected = reason => {
-  const promise = Promise.reject(reason);
-  promise.catch(() => {}); // the reason is read from `status`
-  return Object.assign(promise, {
-    status: 'rejected',
-    reason
-  });
-};
-
-/** A pending promise, settled once from outside. Its `status` updates the moment it settles */
-const deferred = () => {
-  let resolve;
-  let reject;
-  const promise = new Promise((yes, no) => {
-    resolve = value => {
-      Object.assign(promise, {
-        status: 'fulfilled',
-        value
-      });
-      yes(value);
-    };
-    reject = reason => {
-      Object.assign(promise, {
-        status: 'rejected',
-        reason
-      });
-      no(reason);
-    };
-  });
-  promise.status = 'pending';
-  promise.catch(() => {}); // the reason is read from `status`
-  return {
-    promise,
-    resolve,
-    reject
+/**
+ * Moving to another display or zooming changes window.devicePixelRatio without resizing the canvas,
+ * so nothing configures the root again. Resolves the ratio the way configuration does, from the last
+ * applied dpr. Returns the function that stops following.
+ */
+function followDpr(root) {
+  const xr = () => {
+    var _root$store$getState$;
+    return (_root$store$getState$ = root.store.getState().gl) == null ? void 0 : _root$store$getState$.xr;
   };
-};
+  const follow = () => {
+    var _xr, _xr2, _xr3, _last$dpr;
+    const state = root.store.getState();
+    // three doesn't resize during XR and restores its own pixel ratio once the session ends. It holds
+    // the session before it sets isPresenting. Listeners are deduplicated, so this waits once
+    if ((_xr = xr()) != null && _xr.isPresenting || (_xr2 = xr()) != null && _xr2.getSession != null && _xr2.getSession()) {
+      xr().addEventListener('sessionend', follow);
+      return;
+    }
+    (_xr3 = xr()) == null ? void 0 : _xr3.removeEventListener == null ? void 0 : _xr3.removeEventListener('sessionend', follow);
+    // A failed configuration applies everything on the next one
+    const last = root.configuration.previous;
+    if (!last) return;
+    const dpr = (_last$dpr = last.dpr) != null ? _last$dpr : [1, 2];
+    if (state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+  };
+  const unwatch = watchDpr(follow);
+  return () => {
+    var _xr4;
+    unwatch();
+    (_xr4 = xr()) == null ? void 0 : _xr4.removeEventListener == null ? void 0 : _xr4.removeEventListener('sessionend', follow);
+  };
+}
 
 var packageData = {
 	name: "@react-three/fiber",
-	version: "9.8.1",
+	version: "9.8.2",
 	description: "A React renderer for Threejs",
 	keywords: [
 		"react",
@@ -1703,6 +1828,12 @@ var packageData = {
 	module: "dist/react-three-fiber.esm.js",
 	types: "dist/react-three-fiber.cjs.d.ts",
 	"react-native": "native/dist/react-three-fiber-native.cjs.js",
+	files: [
+		"dist",
+		"native",
+		"react-reconciler",
+		"CHANGELOG.md"
+	],
 	sideEffects: false,
 	preconstruct: {
 		entrypoints: [
@@ -16443,6 +16574,27 @@ function G1() {
 var J1 = G1();
 const Z1 = $1(J1);
 
+/** Constructor registration and lookup for JSX elements. */
+
+const catalogue = {};
+let i = 0;
+const toPascalCase = type => `${type[0].toUpperCase()}${type.slice(1)}`;
+function hasConstructor(name) {
+  return name in catalogue;
+}
+function resolveConstructor(name) {
+  return catalogue[name];
+}
+function extend(objects) {
+  if (typeof objects === 'function') {
+    const Component = `${i++}`;
+    catalogue[Component] = objects;
+    return Component;
+  } else {
+    Object.assign(catalogue, objects);
+  }
+}
+
 function createReconciler(config) {
   const reconciler = Z1(config);
 
@@ -16456,24 +16608,11 @@ const NoEventPriority = 0;
 // https://github.com/pmndrs/react-three-fiber/pull/2931
 // https://github.com/microsoft/TypeScript/issues/37079
 
-const catalogue = {};
 const PREFIX_REGEX = /^three(?=[A-Z])/;
-const toPascalCase = type => `${type[0].toUpperCase()}${type.slice(1)}`;
-let i = 0;
-const isConstructor = object => typeof object === 'function';
-function extend(objects) {
-  if (isConstructor(objects)) {
-    const Component = `${i++}`;
-    catalogue[Component] = objects;
-    return Component;
-  } else {
-    Object.assign(catalogue, objects);
-  }
-}
 function validateInstance(type, props) {
   // Get target from catalogue
   const name = toPascalCase(type);
-  const target = catalogue[name];
+  const target = resolveConstructor(name);
 
   // Validate element target
   if (type !== 'primitive' && !target) throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
@@ -16487,7 +16626,7 @@ function validateInstance(type, props) {
 function createInstance(type, props, root) {
   var _props$object;
   // Remove three* prefix from elements if native element not present
-  type = toPascalCase(type) in catalogue ? type : type.replace(PREFIX_REGEX, '');
+  type = hasConstructor(toPascalCase(type)) ? type : type.replace(PREFIX_REGEX, '');
   validateInstance(type, props);
 
   // Regenerate the R3F instance for primitives to simulate a new object
@@ -16534,7 +16673,7 @@ function handleContainerEffects(parent, child, beforeChild) {
   if (!child.object) {
     var _child$props$object, _child$props$args;
     // Get target from catalogue
-    const target = catalogue[toPascalCase(child.type)];
+    const target = resolveConstructor(toPascalCase(child.type));
 
     // Create object
     child.object = (_child$props$object = child.props.object) != null ? _child$props$object : new target(...((_child$props$args = child.props.args) != null ? _child$props$args : []));
@@ -16631,6 +16770,9 @@ function disposeOnIdle(object) {
 function removeChild(parent, child, dispose) {
   if (!child) return;
 
+  // Unlinking clears the parent, which invalidateInstance checks, so remember it
+  const wasLinked = !!child.parent;
+
   // Unlink instances
   child.parent = null;
   const childIndex = parent.children.indexOf(child);
@@ -16668,7 +16810,11 @@ function removeChild(parent, child, dispose) {
   }
 
   // Tree was updated, request a frame for top-level instance
-  if (dispose === undefined) invalidateInstance(child);
+  if (dispose === undefined && wasLinked) {
+    var _child$root;
+    const state = (_child$root = child.root) == null ? void 0 : _child$root.getState == null ? void 0 : _child$root.getState();
+    if (state && state.internal.frames === 0) state.invalidate();
+  }
 }
 function setFiberRef(fiber, publicInstance) {
   for (const _fiber of [fiber, fiber.alternate]) {
@@ -16729,7 +16875,7 @@ function swapReconstructedInstances() {
     if (parent) {
       var _instance$props$objec, _instance$props$args;
       // Get target from catalogue
-      const target = catalogue[toPascalCase(instance.type)];
+      const target = resolveConstructor(toPascalCase(instance.type));
 
       // Create object
       const prevObject = instance.object;
@@ -17188,6 +17334,8 @@ function createRoot(canvas) {
           });
         }
         applyRootConfiguration(root, canvas, props);
+        // Only a range, including the default one, follows the display: a fixed dpr never touches matchMedia
+        if (!root.unwatchDpr && (props.dpr === undefined || Array.isArray(props.dpr))) root.unwatchDpr = followDpr(root);
         resolve(this);
       };
       const run = () => {
@@ -17272,26 +17420,6 @@ function Provider({
     children: children
   });
 }
-
-/**
- * Frees a renderer R3F built. WebGLRenderer.dispose() releases programs and caches but keeps its
- * context until garbage collection, and browsers cap live WebGL contexts, so the context is lost
- * after it. A WebGPURenderer (from a factory) releases its device and context inside dispose().
- */
-function disposeRenderer(gl) {
-  // Avoid starting initialization through three's dispose(). A factory must await init()
-  // before returning its renderer so readiness includes initialization and teardown can wait.
-  if ((gl.hasInitialized == null ? void 0 : gl.hasInitialized()) === false) return;
-  const disposed = attempt(() => {
-    var _gl$renderLists;
-    return gl.dispose ? gl.dispose() : (_gl$renderLists = gl.renderLists) == null ? void 0 : _gl$renderLists.dispose == null ? void 0 : _gl$renderLists.dispose();
-  });
-  // WebGPURenderer.dispose() is async from three r186
-  if (isPromiseLike(disposed)) {
-    return Promise.resolve(disposed).catch(error => console.warn('[R3F] Error disposing renderer', error)).then(() => attempt(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss()));
-  }
-  attempt(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss());
-}
 function attempt(step) {
   try {
     return step();
@@ -17324,21 +17452,11 @@ function unmountComponentAtNode(canvas, callback) {
     state.internal.active = false;
 
     // Release what uses the renderer before the renderer itself
+    attempt(() => root.unwatchDpr == null ? void 0 : root.unwatchDpr());
     attempt(() => state.events.disconnect == null ? void 0 : state.events.disconnect());
     if ((_state$gl = state.gl) != null && _state$gl.xr) attempt(() => state.xr.disconnect());
     if (state.scene) attempt(() => dispose(state.scene));
-    const gl = state.gl;
-    let disposal = undefined;
-    if (gl && root.ownsRenderer) {
-      disposal = attempt(() => disposeRenderer(gl));
-    } else if (gl) {
-      // A renderer passed in keeps its 9.x teardown: its context is lost but it is not disposed
-      attempt(() => {
-        var _gl$renderLists2;
-        return (_gl$renderLists2 = gl.renderLists) == null ? void 0 : _gl$renderLists2.dispose == null ? void 0 : _gl$renderLists2.dispose();
-      });
-      attempt(() => gl.forceContextLoss == null ? void 0 : gl.forceContextLoss());
-    }
+    const disposal = attempt(() => releaseRenderer(state.gl, root.ownsRenderer));
     if (isPromiseLike(disposal)) disposal.then(() => callback == null ? void 0 : callback(canvas));else callback == null ? void 0 : callback(canvas);
   };
   reconciler.updateContainer(null, root.fiber, null, () => {
@@ -17508,93 +17626,132 @@ function createPortal(children, container, state) {
     state: state
   });
 }
+function initializePortal(options, initialState) {
+  const {
+    parentStore,
+    container
+  } = options;
+  const portalStore = createWithEqualityFn((set, get) => ({
+    ...initialState,
+    set,
+    get,
+    // Create once with the store's setter, without retaining a state snapshot.
+    setEvents: events => set(state => ({
+      ...state,
+      events: {
+        ...state.events,
+        ...events
+      }
+    }))
+  }));
+  const parentStateRef = {
+    current: parentStore.getState()
+  };
+  portalStore.setState(portalState => inject(parentStateRef.current, portalState, options));
+  return {
+    parentStore,
+    container,
+    portalStore,
+    parentStateRef
+  };
+}
 function Portal({
   state = {},
   children,
   container
 }) {
-  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
-   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
-   *  the "R3F hooks can only be used within the Canvas component!" warning:
-   *  <Canvas>
-   *    {createPortal(...)} */
+  const parentStore = useStore();
   const {
     events,
     size,
     ...rest
   } = state;
-  const previousRoot = useStore();
   const [raycaster] = React.useState(() => new THREE.Raycaster());
   const [pointer] = React.useState(() => new THREE.Vector2());
-  const inject = useMutableCallback((rootState, injectState) => {
-    let viewport = undefined;
-    if (injectState.camera && size) {
-      const camera = injectState.camera;
-      // Calculate the override viewport, if present
-      viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
-      // Update the portal camera, if it differs from the previous layer
-      if (camera !== rootState.camera) updateCamera(camera, size);
-    }
-    return {
-      // The intersect consists of the previous root state
-      ...rootState,
-      ...injectState,
-      // Portals have their own scene, which forms the root, a raycaster and a pointer
-      scene: container,
-      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: {
-        ...rootState.events,
-        ...injectState.events,
-        ...events
-      },
-      size: {
-        ...rootState.size,
-        ...size
-      },
-      viewport: {
-        ...rootState.viewport,
-        ...viewport
-      },
-      // Layers are allowed to override events
-      setEvents: events => injectState.set(state => ({
-        ...state,
-        events: {
-          ...state.events,
-          ...events
-        }
-      }))
+  const options = {
+    parentStore,
+    container,
+    raycaster,
+    pointer,
+    events,
+    size
+  };
+  const injectRef = useMutableCallback((parentState, portalState) => inject(parentState, portalState, options));
+
+  // Initialize during render. Keep the store in state so Activity can preserve it.
+  const [portal, setPortal] = React.useState(() => initializePortal(options, rest));
+  if (portal.parentStore !== parentStore || portal.container !== container) {
+    setPortal(initializePortal(options, rest));
+  }
+  const {
+    portalStore,
+    parentStateRef
+  } = portal;
+
+  // Subscribe after commit and update the portal on each parent change.
+  useIsomorphicLayoutEffect(() => {
+    const update = parentState => {
+      parentStateRef.current = parentState;
+      portalStore.setState(portalState => injectRef.current(parentState, portalState));
     };
-  });
-  const usePortalStore = React.useMemo(() => {
-    // Create a mirrored store, based on the previous root with a few overrides ...
-    const store = createWithEqualityFn((set, get) => ({
-      ...rest,
-      set,
-      get
-    }));
+    const unsubscribe = parentStore.subscribe(update);
 
-    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
-    const onMutate = prev => store.setState(state => inject.current(prev, state));
-    onMutate(previousRoot.getState());
-    previousRoot.subscribe(onMutate);
-    return store;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [previousRoot, container]);
-  return (
-    /*#__PURE__*/
-    // @ts-ignore, reconciler types are not maintained
-    jsx(Fragment, {
-      children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
-        value: usePortalStore,
-        children: children
-      }), usePortalStore, null)
-    })
-  );
+    // Catch up on changes made before subscribing or while Activity was hidden.
+    const parentState = parentStore.getState();
+    if (parentState !== parentStateRef.current) update(parentState);
+
+    // Clean up when hidden, unmounted or switching stores.
+    return unsubscribe;
+  }, [parentStore, portalStore, parentStateRef]);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: reconciler.createPortal( /*#__PURE__*/jsx(context.Provider, {
+      value: portalStore,
+      children: children
+    }), portalStore, null)
+  });
+}
+function inject(parentState, portalState, options) {
+  const {
+    parentStore,
+    container,
+    raycaster,
+    pointer,
+    events,
+    size
+  } = options;
+  let viewport = undefined;
+  if (portalState.camera && size) {
+    const camera = portalState.camera;
+    // Calculate the override viewport, if present
+    viewport = parentState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
+    // Update the portal camera, if it differs from the previous layer
+    if (camera !== parentState.camera) updateCamera(camera, size);
+  }
+  return {
+    // Inherit parent values and preserve the portal's own state.
+    ...parentState,
+    ...portalState,
+    // Portals have their own scene, raycaster and pointer.
+    scene: container,
+    raycaster,
+    pointer,
+    mouse: pointer,
+    previousRoot: parentStore,
+    // Apply the portal's event, size and viewport overrides.
+    events: {
+      ...parentState.events,
+      ...portalState.events,
+      ...events
+    },
+    size: {
+      ...parentState.size,
+      ...size
+    },
+    viewport: {
+      ...parentState.viewport,
+      ...viewport
+    }
+  };
 }
 
 const DOM_EVENTS = {