@react-three/fiber 9.0.0-alpha.6 → 9.0.0-alpha.8

package/dist/{loop-6e8a6208.cjs.prod.js → loop-5012a96a.cjs.prod.js}

@@ -38,27 +38,28 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+// TODO: upstream to DefinitelyTyped for React 19
+// https://github.com/facebook/react/issues/28956
+
+const createReconciler = Reconciler__default["default"];
+
+// TODO: handle constructor overloads
+// https://github.com/pmndrs/react-three-fiber/pull/2931
+// https://github.com/microsoft/TypeScript/issues/37079
+
 const catalogue = {};
 let i = 0;
-const extend = objects => {
-  if (typeof objects === 'function') {
+const isConstructor$1 = object => typeof object === 'function';
+function extend(objects) {
+  if (isConstructor$1(objects)) {
     const Component = `${i++}`;
     catalogue[Component] = objects;
-
-    // Returns a component whose name will be inferred in devtools
-    // @ts-expect-error
-    return /*#__PURE__*/React__namespace.forwardRef({
-      [objects.name]: (props, ref) => /*#__PURE__*/jsxRuntime.jsx(Component, {
-        ...props,
-        ref: ref
-      })
-    }[objects.name]);
+    return Component;
   } else {
-    return void Object.assign(catalogue, objects);
+    Object.assign(catalogue, objects);
   }
-};
-function createInstance(type, props, root, flushPrimitive = true) {
-  var _props$object;
+}
+function validateInstance(type, props) {
   // Get target from catalogue
   const name = `${type[0].toUpperCase()}${type.slice(1)}`;
   const target = catalogue[name];
@@ -71,13 +72,14 @@ function createInstance(type, props, root, flushPrimitive = true) {
 
   // Throw if an object or literal was passed for args
   if (props.args !== undefined && !Array.isArray(props.args)) throw new Error('R3F: The args prop must be an array!');
+}
+function createInstance(type, props, root) {
+  var _props$object;
+  validateInstance(type, props);
 
   // Regenerate the R3F instance for primitives to simulate a new object
-  if (flushPrimitive && type === 'primitive' && (_props$object = props.object) != null && _props$object.__r3f) delete props.object.__r3f;
-
-  // Create instance
-  const instance = prepare(props.object, root, type, props);
-  return instance;
+  if (type === 'primitive' && (_props$object = props.object) != null && _props$object.__r3f) delete props.object.__r3f;
+  return prepare(props.object, root, type, props);
 }
 function hideInstance(instance) {
   if (!instance.isHidden) {
@@ -174,15 +176,29 @@ function insertBefore(parent, child, beforeChild) {
   // Attach tree once complete
   handleContainerEffects(parent, child, beforeChild);
 }
-function removeChild(parent, child, dispose, recursive) {
+function disposeOnIdle(object) {
+  if (typeof object.dispose === 'function') {
+    const handleDispose = () => {
+      try {
+        object.dispose();
+      } catch {
+        // no-op
+      }
+    };
+
+    // In a testing environment, cleanup immediately
+    if (typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined') handleDispose();
+    // Otherwise, using a real GPU so schedule cleanup to prevent stalls
+    else scheduler.unstable_scheduleCallback(scheduler.unstable_IdlePriority, handleDispose);
+  }
+}
+function removeChild(parent, child, dispose) {
   if (!child) return;
 
   // Unlink instances
   child.parent = null;
-  if (recursive === undefined) {
-    const childIndex = parent.children.indexOf(child);
-    if (childIndex !== -1) parent.children.splice(childIndex, 1);
-  }
+  const childIndex = parent.children.indexOf(child);
+  if (childIndex !== -1) parent.children.splice(childIndex, 1);
 
   // Eagerly tear down tree
   if (child.props.attach) {
@@ -196,10 +212,11 @@ function removeChild(parent, child, dispose, recursive) {
   const shouldDispose = child.props.dispose !== null && dispose !== false;
 
   // Recursively remove instance children
-  if (recursive !== false) {
-    for (const node of child.children) removeChild(child, node, shouldDispose, true);
-    child.children.length = 0;
+  for (let i = child.children.length - 1; i >= 0; i--) {
+    const node = child.children[i];
+    removeChild(child, node, shouldDispose);
   }
+  child.children.length = 0;
 
   // Unlink instance object
   delete child.object.__r3f;
@@ -211,96 +228,108 @@ function removeChild(parent, child, dispose, recursive) {
   //   - cannot be a <primitive object={...} />
   //   - cannot be a THREE.Scene, because three has broken its own API
   if (shouldDispose && child.type !== 'primitive' && child.object.type !== 'Scene') {
-    if (typeof child.object.dispose === 'function') {
-      const dispose = child.object.dispose.bind(child.object);
-      const handleDispose = () => {
-        try {
-          dispose();
-        } catch (e) {
-          // no-op
-        }
-      };
-
-      // In a testing environment, cleanup immediately
-      if (typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined') handleDispose();
-      // Otherwise, using a real GPU so schedule cleanup to prevent stalls
-      else scheduler.unstable_scheduleCallback(scheduler.unstable_IdlePriority, handleDispose);
-    }
+    disposeOnIdle(child.object);
   }
 
   // Tree was updated, request a frame for top-level instance
   if (dispose === undefined) invalidateInstance(child);
 }
-function setFiberInstance(fiber, instance) {
-  if (fiber !== null) {
-    fiber.stateNode = instance;
-    if (typeof fiber.ref === 'function') fiber.ref(instance.object);else if (fiber.ref) fiber.ref.current = instance.object;
+function setFiberRef(fiber, publicInstance) {
+  for (const _fiber of [fiber, fiber.alternate]) {
+    if (_fiber !== null) {
+      if (typeof _fiber.ref === 'function') {
+        _fiber.refCleanup == null ? void 0 : _fiber.refCleanup();
+        const cleanup = _fiber.ref(publicInstance);
+        if (typeof cleanup === 'function') _fiber.refCleanup = cleanup;
+      } else if (_fiber.ref) {
+        _fiber.ref.current = publicInstance;
+      }
+    }
   }
 }
-function switchInstance(oldInstance, type, props, fiber) {
-  // If the old instance is hidden, we need to unhide it.
-  // React assumes it can discard instances since they're pure for DOM.
-  // This isn't true for us since our lifetimes are impure and longliving.
-  // So, we manually check if an instance was hidden and unhide it.
-  if (oldInstance.isHidden) unhideInstance(oldInstance);
-
-  // Create a new instance
-  const newInstance = createInstance(type, props, oldInstance.root, false);
-
-  // Update attach props for primitives since we don't flush them
-  if (type === 'primitive') {
-    newInstance.props.attach = props.attach;
-  }
+const reconstructed = [];
+function swapInstances() {
+  // Detach instance
+  for (const [instance] of reconstructed) {
+    const parent = instance.parent;
+    if (parent) {
+      if (instance.props.attach) {
+        detach(parent, instance);
+      } else if (isObject3D(instance.object) && isObject3D(parent.object)) {
+        parent.object.remove(instance.object);
+      }
+      for (const child of instance.children) {
+        if (child.props.attach) {
+          detach(instance, child);
+        } else if (isObject3D(child.object) && isObject3D(instance.object)) {
+          instance.object.remove(child.object);
+        }
+      }
+    }
 
-  // Move children to new instance
-  for (const child of oldInstance.children) {
-    removeChild(oldInstance, child, false, false);
-    appendChild(newInstance, child);
-  }
-  oldInstance.children.length = 0;
-
-  // Link up new instance
-  const parent = oldInstance.parent;
-  if (parent) {
-    // Manually handle replace https://github.com/pmndrs/react-three-fiber/pull/2680
-
-    newInstance.autoRemovedBeforeAppend = !!newInstance.parent;
-    if (!oldInstance.autoRemovedBeforeAppend) removeChild(parent, oldInstance);
-    appendChild(parent, newInstance);
-
-    // if (!oldInstance.autoRemovedBeforeAppend) {
-    //   insertBefore(parent, newInstance, oldInstance)
-    //   removeChild(parent, oldInstance)
-    // } else {
-    //   appendChild(parent, newInstance)
-    // }
+    // If the old instance is hidden, we need to unhide it.
+    // React assumes it can discard instances since they're pure for DOM.
+    // This isn't true for us since our lifetimes are impure and longliving.
+    // So, we manually check if an instance was hidden and unhide it.
+    if (instance.isHidden) unhideInstance(instance);
+
+    // Dispose of old object if able
+    if (instance.object.__r3f) delete instance.object.__r3f;
+    if (instance.type !== 'primitive') disposeOnIdle(instance.object);
   }
 
-  // This evil hack switches the react-internal fiber instance
-  // https://github.com/facebook/react/issues/14983
-  // TODO: investigate scheduling key prop change instead of switchInstance entirely
-  // https://github.com/facebook/react/pull/15021#issuecomment-480185369
-  setFiberInstance(fiber, newInstance);
-  setFiberInstance(fiber.alternate, newInstance);
+  // Update instance
+  for (const [instance, props, fiber] of reconstructed) {
+    instance.props = props;
+    const parent = instance.parent;
+    if (parent) {
+      var _instance$props$objec, _instance$props$args;
+      // Get target from catalogue
+      const name = `${instance.type[0].toUpperCase()}${instance.type.slice(1)}`;
+      const target = catalogue[name];
+
+      // Create object
+      instance.object = (_instance$props$objec = instance.props.object) != null ? _instance$props$objec : new target(...((_instance$props$args = instance.props.args) != null ? _instance$props$args : []));
+      instance.object.__r3f = instance;
+      setFiberRef(fiber, instance.object);
+
+      // Set initial props
+      applyProps(instance.object, instance.props);
+      if (instance.props.attach) {
+        attach(parent, instance);
+      } else if (isObject3D(instance.object) && isObject3D(parent.object)) {
+        parent.object.add(instance.object);
+      }
+      for (const child of instance.children) {
+        if (child.props.attach) {
+          attach(instance, child);
+        } else if (isObject3D(child.object) && isObject3D(instance.object)) {
+          instance.object.add(child.object);
+        }
+      }
 
-  // Tree was updated, request a frame
-  invalidateInstance(newInstance);
-  return newInstance;
+      // Tree was updated, request a frame
+      invalidateInstance(instance);
+    }
+  }
+  reconstructed.length = 0;
 }
 
 // Don't handle text instances, warn on undefined behavior
 const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
 const NO_CONTEXT = {};
 let currentUpdatePriority = constants.NoEventPriority;
-const reconciler = Reconciler__default["default"]({
+
+// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js
+const NoFlags = 0;
+const Update = 4;
+const reconciler = createReconciler({
   isPrimaryRenderer: false,
   warnsIfNotActing: false,
   supportsMutation: true,
   supportsPersistence: false,
   supportsHydration: false,
-  createInstance(type, props, root) {
-    return createInstance(type, props, root);
-  },
+  createInstance,
   removeChild,
   appendChild,
   appendInitialChild: appendChild,
@@ -322,15 +351,13 @@ const reconciler = Reconciler__default["default"]({
   },
   getRootHostContext: () => NO_CONTEXT,
   getChildHostContext: () => NO_CONTEXT,
-  // @ts-expect-error prepareUpdate and updatePayload removed with React 19
   commitUpdate(instance, type, oldProps, newProps, fiber) {
     var _newProps$args, _oldProps$args, _newProps$args2;
+    validateInstance(type, newProps);
     let reconstruct = false;
 
     // Reconstruct primitives if object prop changes
     if (instance.type === 'primitive' && oldProps.object !== newProps.object) reconstruct = true;
-    // Reconstruct instance if args was changed to an invalid value
-    else if (newProps.args !== undefined && !Array.isArray(newProps.args)) reconstruct = true;
     // Reconstruct instance if args were added or removed
     else if (((_newProps$args = newProps.args) == null ? void 0 : _newProps$args.length) !== ((_oldProps$args = oldProps.args) == null ? void 0 : _oldProps$args.length)) reconstruct = true;
     // Reconstruct instance if args were changed
@@ -340,14 +367,22 @@ const reconciler = Reconciler__default["default"]({
     })) reconstruct = true;
 
     // Reconstruct when args or <primitive object={...} have changes
-    if (reconstruct) return switchInstance(instance, type, newProps, fiber);
-
-    // Create a diff-set, flag if there are any changes
-    const changedProps = diffProps(instance, newProps);
-    if (Object.keys(changedProps).length) {
-      Object.assign(instance.props, changedProps);
-      applyProps(instance.object, changedProps);
+    if (reconstruct) {
+      reconstructed.push([instance, {
+        ...newProps
+      }, fiber]);
+    } else {
+      // Create a diff-set, flag if there are any changes
+      const changedProps = diffProps(instance, newProps);
+      if (Object.keys(changedProps).length) {
+        Object.assign(instance.props, changedProps);
+        applyProps(instance.object, changedProps);
+      }
     }
+
+    // Flush reconstructed siblings when we hit the last updated child in a sequence
+    const isTailSibling = fiber.sibling === null || (fiber.flags & Update) === NoFlags;
+    if (isTailSibling) swapInstances();
   },
   finalizeInitialChildren: () => false,
   commitMount() {},
@@ -369,8 +404,8 @@ const reconciler = Reconciler__default["default"]({
   beforeActiveInstanceBlur() {},
   afterActiveInstanceBlur() {},
   detachDeletedInstance() {},
-  // TODO: add shell types for these and upstream to DefinitelyTyped
-  // https://github.com/facebook/react/blob/main/packages/react-art/src/ReactFiberConfigART.js
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
   shouldAttemptEagerTransition() {
     return false;
   },
@@ -414,7 +449,8 @@ const reconciler = Reconciler__default["default"]({
       default:
         return constants.DefaultEventPriority;
     }
-  }
+  },
+  resetFormInstance() {}
 });
 
 var _window$document, _window$navigator;
@@ -691,7 +727,7 @@ function detach(parent, child) {
 }
 const RESERVED_PROPS = [...REACT_INTERNAL_PROPS,
 // Instance props
-'args', 'dispose', 'attach', 'object',
+'args', 'dispose', 'attach', 'object', 'onUpdate',
 // Behavior flags
 'dispose'];
 const MEMOIZED_PROTOTYPES = new Map();
@@ -865,6 +901,8 @@ function applyProps(object, props) {
 }
 function invalidateInstance(instance) {
   var _instance$root;
+  if (!instance.parent) return;
+  instance.props.onUpdate == null ? void 0 : instance.props.onUpdate(instance.object);
   const state = (_instance$root = instance.root) == null ? void 0 : _instance$root.getState == null ? void 0 : _instance$root.getState();
   if (state && state.internal.frames === 0) state.invalidate();
 }
@@ -1427,13 +1465,9 @@ const createStore = (invalidate, advance) => {
           }
         };
       }),
-      setFrameloop: frameloop => {
-        var _frameloop$mode, _frameloop$render, _frameloop$maxDelta;
-        const state = get();
-        const mode = typeof frameloop === 'string' ? frameloop : (frameloop == null ? void 0 : frameloop.mode) === 'auto' ? 'always' : (_frameloop$mode = frameloop == null ? void 0 : frameloop.mode) != null ? _frameloop$mode : state.frameloop;
-        const render = typeof frameloop === 'string' ? state.internal.render : (_frameloop$render = frameloop == null ? void 0 : frameloop.render) != null ? _frameloop$render : state.internal.render;
-        const maxDelta = typeof frameloop === 'string' ? state.internal.maxDelta : (_frameloop$maxDelta = frameloop == null ? void 0 : frameloop.maxDelta) != null ? _frameloop$maxDelta : state.internal.maxDelta;
-        const clock = state.clock;
+      setFrameloop: (frameloop = 'always') => {
+        const clock = get().clock;
+
         // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
         clock.stop();
         clock.elapsedTime = 0;
@@ -1442,12 +1476,7 @@ const createStore = (invalidate, advance) => {
           clock.elapsedTime = 0;
         }
         set(() => ({
-          frameloop: mode,
-          internal: {
-            ...state.internal,
-            render,
-            maxDelta
-          }
+          frameloop
         }));
       },
       previousRoot: undefined,
@@ -1463,25 +1492,14 @@ const createStore = (invalidate, advance) => {
         // Updates
         active: false,
         frames: 0,
-        stages: [],
-        render: 'auto',
-        maxDelta: 1 / 10,
         priority: 0,
         subscribe: (ref, priority, store) => {
-          const state = get();
-          const internal = state.internal;
+          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);
-          // We use the render flag and deprecate priority
-          if (internal.priority && state.internal.render === 'auto') set(() => ({
-            internal: {
-              ...state.internal,
-              render: 'manual'
-            }
-          }));
           internal.subscribers.push({
             ref,
             priority,
@@ -1491,18 +1509,10 @@ const createStore = (invalidate, advance) => {
           // highest priority renders last (on top of the other frames)
           internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
           return () => {
-            const state = get();
-            const internal = state.internal;
+            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);
-              // We use the render flag and deprecate priority
-              if (!internal.priority && state.internal.render === 'manual') set(() => ({
-                internal: {
-                  ...state.internal,
-                  render: 'auto'
-                }
-              }));
               // Remove subscriber from list
               internal.subscribers = internal.subscribers.filter(s => s.ref !== ref);
             }
@@ -1556,139 +1566,6 @@ const createStore = (invalidate, advance) => {
   return rootStore;
 };
 
-// TODO: Remove deprecated fields in `Subscription`
-
-/**
- * Class representing a stage that updates every frame.
- * Stages are used to build a lifecycle of effects for an app's frameloop.
- */
-class Stage {
-  constructor() {
-    this.subscribers = [];
-    this._frameTime = 0;
-  }
-
-  /**
-   * Executes all callback subscriptions on the stage.
-   * @param delta - Delta time between frame calls.
-   * @param [frame] - The XR frame if it exists.
-   */
-  frame(delta, frame) {
-    const subs = this.subscribers;
-    const initialTime = performance.now();
-    for (let i = 0; i < subs.length; i++) {
-      subs[i].ref.current(subs[i].store.getState(), delta, frame);
-    }
-    this._frameTime = performance.now() - initialTime;
-  }
-
-  /**
-   * Adds a callback subscriber to the stage.
-   * @param ref - The mutable callback reference.
-   * @param store - The store to be used with the callback execution.
-   * @returns A function to remove the subscription.
-   */
-  add(ref, store) {
-    this.subscribers.push({
-      ref,
-      store
-    });
-    return () => {
-      this.subscribers = this.subscribers.filter(sub => {
-        return sub.ref !== ref;
-      });
-    };
-  }
-  get frameTime() {
-    return this._frameTime;
-  }
-}
-
-// Using Unity's fixedStep default.
-const FPS_50 = 1 / 50;
-
-/**
- * Class representing a stage that updates every frame at a fixed rate.
- * @param name - Name of the stage.
- * @param [fixedStep] - Fixed step rate.
- * @param [maxSubsteps] - Maximum number of substeps.
- */
-class FixedStage extends Stage {
-  constructor(fixedStep, maxSubSteps) {
-    super();
-    this._fixedStep = fixedStep != null ? fixedStep : FPS_50;
-    this._maxSubsteps = maxSubSteps != null ? maxSubSteps : 6;
-    this._accumulator = 0;
-    this._alpha = 0;
-    this._fixedFrameTime = 0;
-    this._substepTimes = [];
-  }
-
-  /**
-   * Executes all callback subscriptions on the stage.
-   * @param delta - Delta time between frame calls.
-   * @param [frame] - The XR frame if it exists.
-   */
-  frame(delta, frame) {
-    const initialTime = performance.now();
-    let substeps = 0;
-    this._substepTimes = [];
-    this._accumulator += delta;
-    while (this._accumulator >= this._fixedStep && substeps < this._maxSubsteps) {
-      this._accumulator -= this._fixedStep;
-      substeps++;
-      super.frame(this._fixedStep, frame);
-      this._substepTimes.push(super.frameTime);
-    }
-    this._fixedFrameTime = performance.now() - initialTime;
-
-    // The accumulator will only be larger than the fixed step if we had to
-    // bail early due to hitting the max substep limit or execution time lagging.
-    // In that case, we want to shave off the excess so we don't fall behind next frame.
-    this._accumulator = this._accumulator % this._fixedStep;
-    this._alpha = this._accumulator / this._fixedStep;
-  }
-  get frameTime() {
-    return this._fixedFrameTime;
-  }
-  get substepTimes() {
-    return this._substepTimes;
-  }
-  get fixedStep() {
-    return this._fixedStep;
-  }
-  set fixedStep(fixedStep) {
-    this._fixedStep = fixedStep;
-  }
-  get maxSubsteps() {
-    return this._maxSubsteps;
-  }
-  set maxSubsteps(maxSubsteps) {
-    this._maxSubsteps = maxSubsteps;
-  }
-  get accumulator() {
-    return this._accumulator;
-  }
-  get alpha() {
-    return this._alpha;
-  }
-}
-const Early = /*#__PURE__*/new Stage();
-const Fixed = /*#__PURE__*/new FixedStage();
-const Update = /*#__PURE__*/new Stage();
-const Late = /*#__PURE__*/new Stage();
-const Render = /*#__PURE__*/new Stage();
-const After = /*#__PURE__*/new Stage();
-const Stages = {
-  Early,
-  Fixed,
-  Update,
-  Late,
-  Render,
-  After
-};
-const Lifecycle = [Early, Fixed, Update, Late, Render, After];
-
 /**
  * Exposes an object's {@link Instance}.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useinstancehandle
@@ -1734,21 +1611,6 @@ function useFrame(callback, renderPriority = 0) {
   return null;
 }
 
-/**
- * Executes a callback in a given update stage.
- * Uses the stage instance to identify which stage to target in the lifecycle.
- */
-function useUpdate(callback, stage = Stages.Update) {
-  const store = useStore();
-  const stages = store.getState().internal.stages;
-  // Memoize ref
-  const ref = useMutableCallback(callback);
-  // Throw an error if a stage does not exist in the lifecycle
-  if (!stages.includes(stage)) throw new Error(`An invoked stage does not exist in the lifecycle.`);
-  // Subscribe on mount, unsubscribe on unmount
-  useIsomorphicLayoutEffect(() => stage.add(ref, store), [stage]);
-}
-
 /**
  * Returns a node graph of an object with named nodes & materials.
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
@@ -1832,42 +1694,6 @@ const createRendererInstance = (gl, canvas) => {
     ...gl
   });
 };
-const createStages = (stages, store) => {
-  const state = store.getState();
-  let subscribers;
-  let subscription;
-  const _stages = stages != null ? stages : Lifecycle;
-  if (!_stages.includes(Stages.Update)) throw 'The Stages.Update stage is required for R3F.';
-  if (!_stages.includes(Stages.Render)) throw 'The Stages.Render stage is required for R3F.';
-  state.set(({
-    internal
-  }) => ({
-    internal: {
-      ...internal,
-      stages: _stages
-    }
-  }));
-
-  // Add useFrame loop to update stage
-  const frameCallback = {
-    current(state, delta, frame) {
-      subscribers = state.internal.subscribers;
-      for (let i = 0; i < subscribers.length; i++) {
-        subscription = subscribers[i];
-        subscription.ref.current(subscription.store.getState(), delta, frame);
-      }
-    }
-  };
-  Stages.Update.add(frameCallback, store);
-
-  // Add render callback to render stage
-  const renderCallback = {
-    current(state) {
-      if (state.internal.render === 'auto' && state.gl.render) state.gl.render(state.scene, state.camera);
-    }
-  };
-  Stages.Render.add(renderCallback, store);
-};
 function computeInitialSize(canvas, size) {
   if (!size && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
     const {
@@ -1965,8 +1791,7 @@ function createRoot(canvas) {
         performance,
         raycaster: raycastOptions,
         camera: cameraOptions,
-        onPointerMissed,
-        stages
+        onPointerMissed
       } = props;
       let state = store.getState();
 
@@ -2008,9 +1833,11 @@ function createRoot(canvas) {
             applyProps(camera, cameraOptions);
             // Preserve user-defined frustum if possible
             // https://github.com/pmndrs/react-three-fiber/issues/3160
-            if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
-              camera.manual = true;
-              camera.updateProjectionMatrix();
+            if (!camera.manual) {
+              if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+                camera.manual = true;
+                camera.updateProjectionMatrix();
+              }
             }
           }
           // Always look at center by default
@@ -2156,9 +1983,6 @@ function createRoot(canvas) {
         }
       }));
 
-      // Create update stages. Only do this once on init
-      if (state.internal.stages.length === 0) createStages(stages, store);
-
       // Set locals
       onCreated = onCreatedCallback;
       configured = true;
@@ -2265,7 +2089,7 @@ function Portal({
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
   const inject = useMutableCallback((rootState, injectState) => {
-    let viewport;
+    let viewport = undefined;
     if (injectState.camera && size) {
       const camera = injectState.camera;
       // Calculate the override viewport, if present
@@ -2276,8 +2100,7 @@ function Portal({
     return {
       // The intersect consists of the previous root state
       ...rootState,
-      get: injectState.get,
-      set: injectState.set,
+      ...injectState,
       // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
       raycaster,
@@ -2310,6 +2133,7 @@ function Portal({
     };
   });
   const usePortalStore = React__namespace.useMemo(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
     const store = traditional.createWithEqualityFn((set, get) => ({
       ...rest,
       set,
@@ -2382,21 +2206,30 @@ function flushGlobalEffects(type, timestamp) {
       return run(globalTailEffects, timestamp);
   }
 }
+let subscribers;
+let subscription;
 function update(timestamp, state, frame) {
   // Run local effects
   let delta = state.clock.getDelta();
+
   // In frameloop='never' mode, clock times are updated using the provided timestamp
   if (state.frameloop === 'never' && typeof timestamp === 'number') {
     delta = timestamp - state.clock.elapsedTime;
     state.clock.oldTime = state.clock.elapsedTime;
     state.clock.elapsedTime = timestamp;
-  } else {
-    delta = Math.max(Math.min(delta, state.internal.maxDelta), 0);
   }
-  // Call subscribers (useUpdate)
-  for (const stage of state.internal.stages) {
-    stage.frame(delta, frame);
+
+  // Call subscribers (useFrame)
+  subscribers = state.internal.subscribers;
+  for (let i = 0; i < subscribers.length; i++) {
+    subscription = subscribers[i];
+    subscription.ref.current(subscription.store.getState(), delta, frame);
   }
+
+  // Render content
+  if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera);
+
+  // Decrease frame count
   state.internal.frames = Math.max(0, state.internal.frames - 1);
   return state.frameloop === 'always' ? 1 : state.internal.frames;
 }
@@ -2481,9 +2314,6 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
 
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
-exports.FixedStage = FixedStage;
-exports.Stage = Stage;
-exports.Stages = Stages;
 exports._roots = _roots;
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
@@ -2515,4 +2345,3 @@ exports.useLoader = useLoader;
 exports.useMutableCallback = useMutableCallback;
 exports.useStore = useStore;
 exports.useThree = useThree;
-exports.useUpdate = useUpdate;