@react-three/fiber 9.0.0-alpha.0 → 9.0.0-alpha.2

package/dist/{index-b3be5a63.cjs.dev.js → index-5bd4d3cf.cjs.dev.js}

@@ -33,12 +33,9 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var create__default = /*#__PURE__*/_interopDefault(create);
 var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 
-var threeTypes = /*#__PURE__*/Object.freeze({
-  __proto__: null
-});
-
 var _window$document, _window$navigator;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
+const isRef = obj => obj && obj.hasOwnProperty('current');
 /**
  * An SSR-friendly useLayoutEffect.
  *
@@ -72,8 +69,8 @@ class ErrorBoundary extends React__namespace.Component {
     };
   }
 
-  componentDidCatch(error) {
-    this.props.set(error);
+  componentDidCatch(err) {
+    this.props.set(err);
   }
 
   render() {
@@ -86,10 +83,9 @@ ErrorBoundary.getDerivedStateFromError = () => ({
   error: true
 });
 
-const DEFAULT = '__default';
-const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
-  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
+  const target = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 /**
  * Returns instance root state
@@ -157,250 +153,225 @@ function buildGraph(object) {
   }
 
   return data;
-} // Disposes an object and all its properties
-
+}
+// Disposes an object and all its properties
 function dispose(obj) {
-  if (obj.dispose && obj.type !== 'Scene') obj.dispose();
+  if (obj.type !== 'Scene') obj.dispose == null ? void 0 : obj.dispose();
 
   for (const p in obj) {
-    p.dispose == null ? void 0 : p.dispose();
-    delete obj[p];
+    const prop = obj[p];
+    if ((prop == null ? void 0 : prop.type) !== 'Scene') prop == null ? void 0 : prop.dispose == null ? void 0 : prop.dispose();
+  }
+}
+const REACT_INTERNAL_PROPS = ['children', 'key', 'ref']; // Gets only instance props from reconciler fibers
+
+function getInstanceProps(queue) {
+  const props = {};
+
+  for (const key in queue) {
+    if (!REACT_INTERNAL_PROPS.includes(key)) props[key] = queue[key];
   }
+
+  return props;
 } // Each object in the scene carries a small LocalState descriptor
 
-function prepare(object, state) {
-  const instance = object;
+function prepare(target, root, type, props) {
+  const object = target; // Create instance descriptor
 
-  if (state != null && state.primitive || !instance.__r3f) {
-    instance.__r3f = {
-      type: '',
-      root: null,
-      previousAttach: null,
-      memoizedProps: {},
+  let instance = object.__r3f;
+
+  if (!instance) {
+    instance = {
+      root,
+      type,
+      parent: null,
+      children: [],
+      props: getInstanceProps(props),
+      object,
       eventCount: 0,
       handlers: {},
-      objects: [],
-      parent: null,
-      ...state
+      isHidden: false
     };
+    object.__r3f = instance;
   }
 
-  return object;
+  return instance;
 }
+function resolve(root, key) {
+  var _target;
 
-function resolve(instance, key) {
-  let target = instance;
+  let target = root[key];
+  if (!key.includes('-')) return {
+    root,
+    key,
+    target
+  }; // Resolve pierced target
 
-  if (key.includes('-')) {
-    const entries = key.split('-');
-    const last = entries.pop();
-    target = entries.reduce((acc, key) => acc[key], instance);
-    return {
-      target,
-      key: last
-    };
-  } else return {
-    target,
-    key
+  const chain = key.split('-');
+  target = chain.reduce((acc, key) => acc[key], root);
+  key = chain.pop(); // Switch root if atomic
+
+  if (!((_target = target) != null && _target.set)) root = chain.reduce((acc, key) => acc[key], root);
+  return {
+    root,
+    key,
+    target
   };
 } // Checks if a dash-cased string ends with an integer
 
-
 const INDEX_REGEX = /-\d+$/;
-function attach(parent, child, type) {
-  if (is.str(type)) {
+function attach(parent, child) {
+  if (is.str(child.props.attach)) {
     // If attaching into an array (foo-0), create one
-    if (INDEX_REGEX.test(type)) {
-      const root = type.replace(INDEX_REGEX, '');
+    if (INDEX_REGEX.test(child.props.attach)) {
+      const index = child.props.attach.replace(INDEX_REGEX, '');
       const {
-        target,
+        root,
         key
-      } = resolve(parent, root);
-      if (!Array.isArray(target[key])) target[key] = [];
+      } = resolve(parent.object, index);
+      if (!Array.isArray(root[key])) root[key] = [];
     }
 
     const {
-      target,
+      root,
       key
-    } = resolve(parent, type);
-    child.__r3f.previousAttach = target[key];
-    target[key] = child;
-  } else child.__r3f.previousAttach = type(parent, child);
+    } = resolve(parent.object, child.props.attach);
+    child.previousAttach = root[key];
+    root[key] = child.object;
+  } else if (is.fun(child.props.attach)) {
+    child.previousAttach = child.props.attach(parent.object, child.object);
+  }
 }
-function detach(parent, child, type) {
-  var _child$__r3f, _child$__r3f2;
-
-  if (is.str(type)) {
+function detach(parent, child) {
+  if (is.str(child.props.attach)) {
     const {
-      target,
+      root,
       key
-    } = resolve(parent, type);
-    const previous = child.__r3f.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
-
-    if (previous === undefined) delete target[key]; // Otherwise set the previous value
-    else target[key] = previous;
-  } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
-
-  (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
-} // This function prepares a set of changes to be applied to the instance
-
-function diffProps(instance, {
-  children: cN,
-  key: kN,
-  ref: rN,
-  ...props
-}, {
-  children: cP,
-  key: kP,
-  ref: rP,
-  ...previous
-} = {}, remove = false) {
-  var _instance$__r3f;
-
-  const localState = (_instance$__r3f = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f : {};
-  const entries = Object.entries(props);
-  const changes = []; // Catch removed props, prepend them so they can be reset or removed
-
-  if (remove) {
-    const previousKeys = Object.keys(previous);
-
-    for (let i = 0; i < previousKeys.length; i++) {
-      if (!props.hasOwnProperty(previousKeys[i])) entries.unshift([previousKeys[i], DEFAULT + 'remove']);
-    }
+    } = resolve(parent.object, child.props.attach);
+    const previous = child.previousAttach; // When the previous value was undefined, it means the value was never set to begin with
+
+    if (previous === undefined) delete root[key]; // Otherwise set the previous value
+    else root[key] = previous;
+  } else {
+    child.previousAttach == null ? void 0 : child.previousAttach(parent.object, child.object);
   }
 
-  entries.forEach(([key, value]) => {
-    var _instance$__r3f2;
+  delete child.previousAttach;
+}
+const RESERVED_PROPS = [...REACT_INTERNAL_PROPS, // Instance props
+'args', 'dispose', 'attach', 'object', // Behavior flags
+'dispose']; // This function prepares a set of changes to be applied to the instance
 
-    // Bail out on primitive object
-    if ((_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.primitive && key === 'object') return; // When props match bail out
+function diffProps(instance, newProps, resetRemoved = false) {
+  const changedProps = {}; // Sort through props
 
-    if (is.equ(value, previous[key])) return; // Collect handlers and bail out
+  for (const prop in newProps) {
+    // Skip reserved keys
+    if (RESERVED_PROPS.includes(prop)) continue; // Skip if props match
 
-    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]); // Split dashed props
+    if (is.equ(newProps[prop], instance.props[prop])) continue; // Props changed, add them
 
-    let entries = [];
-    if (key.includes('-')) entries = key.split('-');
-    changes.push([key, value, false, entries]);
-  });
-  const memoized = { ...props
-  };
-  if (localState.memoizedProps && localState.memoizedProps.args) memoized.args = localState.memoizedProps.args;
-  if (localState.memoizedProps && localState.memoizedProps.attach) memoized.attach = localState.memoizedProps.attach;
-  return {
-    memoized,
-    changes
-  };
-} // This function applies a set of changes to the instance
-
-function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState;
-
-  // Filter equals, events and reserved props
-  const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
-  const root = localState.root;
-  const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
-  const {
-    memoized,
-    changes
-  } = isDiffSet(data) ? data : diffProps(instance, data);
-  const prevHandlers = localState.eventCount; // Prepare memoized props
-
-  if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
-  changes.forEach(([key, value, isEvent, keys]) => {
-    let currentInstance = instance;
-    let targetProp = currentInstance[key]; // Revolve dashed props
-
-    if (keys.length) {
-      targetProp = keys.reduce((acc, key) => acc[key], instance); // If the target is atomic, it forces us to switch the root
-
-      if (!(targetProp && targetProp.set)) {
-        const [name, ...reverseEntries] = keys.reverse();
-        currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
-        key = name;
-      }
-    } // https://github.com/mrdoob/three.js/issues/21209
-    // HMR/fast-refresh relies on the ability to cancel out props, but threejs
-    // has no means to do this. Hence we curate a small collection of value-classes
-    // with their respective constructor/set arguments
-    // For removed props, try to set default values, if possible
+    changedProps[prop] = newProps[prop];
+  } // Reset removed props for HMR
 
 
-    if (value === DEFAULT + 'remove') {
-      if (targetProp && targetProp.constructor) {
-        var _memoized$args;
+  if (resetRemoved) {
+    for (const prop in instance.props) {
+      if (RESERVED_PROPS.includes(prop) || newProps.hasOwnProperty(prop)) continue;
+      const {
+        root,
+        key
+      } = resolve(instance.object, prop); // https://github.com/mrdoob/three.js/issues/21209
+      // HMR/fast-refresh relies on the ability to cancel out props, but threejs
+      // has no means to do this. Hence we curate a small collection of value-classes
+      // with their respective constructor/set arguments
+      // For removed props, try to set default values, if possible
 
-        // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(...((_memoized$args = memoized.args) != null ? _memoized$args : []));
-      } else if (currentInstance.constructor) {
-        var _currentInstance$__r;
+      if (root.constructor) {
+        var _root$__r3f$props$arg, _root$__r3f;
 
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = currentInstance.__r3f.memoizedProps.args) != null ? _currentInstance$__r : []));
-        value = defaultClassCall[targetProp]; // destory the instance
+        const defaultClassCall = new root.constructor(...((_root$__r3f$props$arg = (_root$__r3f = root.__r3f) == null ? void 0 : _root$__r3f.props.args) != null ? _root$__r3f$props$arg : []));
+        changedProps[key] = defaultClassCall[key]; // destroy the instance
 
-        if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
+        if (defaultClassCall.dispose) defaultClassCall.dispose();
       } else {
-        value = 0;
+        // instance does not have constructor, just set it to 0
+        changedProps[key] = 0;
       }
-    } // Deal with pointer events ...
-
-
-    if (isEvent) {
-      if (value) localState.handlers[key] = value;else delete localState.handlers[key];
-      localState.eventCount = Object.keys(localState.handlers).length;
-    } // Special treatment for objects with support for set/copy, and layers
-    else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
-      // If value is an array
-      if (Array.isArray(value)) {
-        if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-      } // Test again target.copy(class) next ...
-      else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) {
-        targetProp.copy(value);
-      } // If nothing else fits, just set the single value, ignore undefined
-      // https://github.com/pmndrs/react-three-fiber/issues/274
-      else if (value !== undefined) {
-        const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
-
-        if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-        else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-        else targetProp.set(value);
-      } // Else, just overwrite the value
+    }
+  }
 
-    } else {
-      currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+  return changedProps;
+} // This function applies a set of changes to the instance
+
+function applyProps(object, props) {
+  const instance = object.__r3f;
+  const rootState = instance == null ? void 0 : instance.root.getState();
+  const prevHandlers = instance == null ? void 0 : instance.eventCount;
+
+  for (const prop in props) {
+    let value = props[prop]; // Don't mutate reserved keys
+
+    if (RESERVED_PROPS.includes(prop)) continue; // Deal with pointer events ...
+
+    if (instance && /^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(prop)) {
+      if (typeof value === 'function') instance.handlers[prop] = value;else delete instance.handlers[prop];
+      instance.eventCount = Object.keys(instance.handlers).length;
+    }
+
+    const {
+      root,
+      key,
+      target
+    } = resolve(object, prop); // Copy if properties match signatures
+
+    if (target != null && target.copy && (target == null ? void 0 : target.constructor) === (value == null ? void 0 : value.constructor)) {
+      target.copy(value);
+    } // Layers have no copy function, we must therefore copy the mask property
+    else if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
+      target.mask = value.mask;
+    } // Set array types
+    else if (target != null && target.set && Array.isArray(value)) {
+      if (target.fromArray) target.fromArray(value);else target.set(...value);
+    } // Set literal types, ignore undefined
+    // https://github.com/pmndrs/react-three-fiber/issues/274
+    else if (target != null && target.set && typeof value !== 'object') {
+      const isColor = target instanceof THREE__namespace.Color; // Allow setting array scalars
+
+      if (!isColor && target.setScalar && typeof value === 'number') target.setScalar(value); // Otherwise just set ...
+      else if (value !== undefined) target.set(value);
+    } // Else, just overwrite the value
+    else {
+      root[key] = value; // Auto-convert sRGB textures, for now ...
       // https://github.com/pmndrs/react-three-fiber/issues/344
 
-      if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
-        currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
+      if (!(rootState != null && rootState.linear) && root[key] instanceof THREE__namespace.Texture) {
+        root[key].encoding = THREE__namespace.sRGBEncoding;
       }
     }
+  }
 
-    invalidateInstance(instance);
-  });
-
-  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (instance != null && instance.parent && rootState != null && rootState.internal && instance.object instanceof THREE__namespace.Object3D && prevHandlers !== instance.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
-    const index = rootState.internal.interaction.indexOf(instance);
+    const index = rootState.internal.interaction.indexOf(instance.object);
     if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
 
-    if (localState.eventCount) rootState.internal.interaction.push(instance);
-  } // Call the update lifecycle when it is being updated, but only when it is part of the scene
-
+    if (instance.eventCount && instance.object.raycast !== null && instance.object instanceof THREE__namespace.Object3D) {
+      rootState.internal.interaction.push(instance.object);
+    }
+  }
 
-  if (changes.length && instance.parent) updateInstance(instance);
-  return instance;
+  if (instance) invalidateInstance(instance);
+  return object;
 }
 function invalidateInstance(instance) {
-  var _instance$__r3f4, _instance$__r3f4$root;
+  var _instance$root;
 
-  const state = (_instance$__r3f4 = instance.__r3f) == null ? void 0 : (_instance$__r3f4$root = _instance$__r3f4.root) == null ? void 0 : _instance$__r3f4$root.getState == null ? void 0 : _instance$__r3f4$root.getState();
+  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();
 }
-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
@@ -421,6 +392,280 @@ function updateCamera(camera, size) {
   }
 }
 
+// Keys that shouldn't be copied between R3F stores
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
+const isRenderer = def => !!(def != null && def.render);
+const context = /*#__PURE__*/React__namespace.createContext(null);
+
+const createStore = (invalidate, advance) => {
+  const rootStore = create__default["default"]((set, get) => {
+    const position = new THREE__namespace.Vector3();
+    const defaultTarget = new THREE__namespace.Vector3();
+    const tempTarget = new THREE__namespace.Vector3();
+
+    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
+      const {
+        width,
+        height,
+        top,
+        left
+      } = size;
+      const aspect = width / height;
+      if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
+      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+
+      if (isOrthographicCamera(camera)) {
+        return {
+          width: width / camera.zoom,
+          height: height / camera.zoom,
+          top,
+          left,
+          factor: 1,
+          distance,
+          aspect
+        };
+      } else {
+        const fov = camera.fov * Math.PI / 180; // convert vertical fov to radians
+
+        const h = 2 * Math.tan(fov / 2) * distance; // visible height
+
+        const w = h * (width / height);
+        return {
+          width: w,
+          height: h,
+          top,
+          left,
+          factor: width / w,
+          distance,
+          aspect
+        };
+      }
+    }
+
+    let performanceTimeout = undefined;
+
+    const setPerformanceCurrent = current => set(state => ({
+      performance: { ...state.performance,
+        current
+      }
+    }));
+
+    const pointer = new THREE__namespace.Vector2();
+    const rootState = {
+      set,
+      get,
+      // Mock objects that have to be configured
+      gl: null,
+      camera: null,
+      raycaster: null,
+      events: {
+        priority: 1,
+        enabled: true,
+        connected: false
+      },
+      xr: null,
+      invalidate: (frames = 1) => invalidate(get(), frames),
+      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
+      legacy: false,
+      linear: false,
+      flat: false,
+      scene: new THREE__namespace.Scene(),
+      controls: null,
+      clock: new THREE__namespace.Clock(),
+      pointer,
+      mouse: pointer,
+      frameloop: 'always',
+      onPointerMissed: undefined,
+      performance: {
+        current: 1,
+        min: 0.5,
+        max: 1,
+        debounce: 200,
+        regress: () => {
+          const state = get(); // Clear timeout
+
+          if (performanceTimeout) clearTimeout(performanceTimeout); // Set lower bound performance
+
+          if (state.performance.current !== state.performance.min) setPerformanceCurrent(state.performance.min); // Go back to upper bound performance after a while unless something regresses meanwhile
+
+          performanceTimeout = setTimeout(() => setPerformanceCurrent(get().performance.max), state.performance.debounce);
+        }
+      },
+      size: {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0
+      },
+      viewport: {
+        initialDpr: 0,
+        dpr: 0,
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        aspect: 0,
+        distance: 0,
+        factor: 0,
+        getCurrentViewport
+      },
+      setEvents: events => set(state => ({ ...state,
+        events: { ...state.events,
+          ...events
+        }
+      })),
+      setSize: (width, height, top = 0, left = 0) => {
+        const camera = get().camera;
+        const size = {
+          width,
+          height,
+          top,
+          left
+        };
+        set(state => ({
+          size,
+          viewport: { ...state.viewport,
+            ...getCurrentViewport(camera, defaultTarget, size)
+          }
+        }));
+      },
+      setDpr: dpr => set(state => {
+        const resolved = calculateDpr(dpr);
+        return {
+          viewport: { ...state.viewport,
+            dpr: resolved,
+            initialDpr: state.viewport.initialDpr || resolved
+          }
+        };
+      }),
+      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; // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+
+        clock.stop();
+        clock.elapsedTime = 0;
+
+        if (frameloop !== 'never') {
+          clock.start();
+          clock.elapsedTime = 0;
+        }
+
+        set(() => ({
+          frameloop: mode,
+          internal: { ...state.internal,
+            render,
+            maxDelta
+          }
+        }));
+      },
+      previousRoot: undefined,
+      internal: {
+        // Events
+        interaction: [],
+        hovered: new Map(),
+        subscribers: [],
+        initialClick: [0, 0],
+        initialHits: [],
+        capturedMap: new Map(),
+        lastEvent: /*#__PURE__*/React__namespace.createRef(),
+        // Updates
+        active: false,
+        frames: 0,
+        stages: [],
+        render: 'auto',
+        maxDelta: 1 / 10,
+        priority: 0,
+        subscribe: (ref, priority, store) => {
+          const state = get();
+          const internal = state.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,
+            store
+          }); // Register subscriber and sort layers from lowest to highest, meaning,
+          // highest priority renders last (on top of the other frames)
+
+          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
+          return () => {
+            const state = get();
+            const internal = state.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);
+            }
+          };
+        }
+      }
+    };
+    return rootState;
+  });
+  const state = rootStore.getState();
+  prepare(state.scene, rootStore, '', {});
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
+  rootStore.subscribe(() => {
+    const {
+      camera,
+      size,
+      viewport,
+      gl,
+      set
+    } = rootStore.getState(); // Resize camera and renderer on changes to size and pixelratio
+
+    if (size !== oldSize || viewport.dpr !== oldDpr) {
+      oldSize = size;
+      oldDpr = viewport.dpr; // Update camera & renderer
+
+      updateCamera(camera, size);
+      gl.setPixelRatio(viewport.dpr); // Play nice with offscreen canvas contexts
+
+      const updateStyle = gl.domElement instanceof HTMLCanvasElement;
+      gl.setSize(size.width, size.height, updateStyle);
+    } // Update viewport once the camera changes
+
+
+    if (camera !== oldCamera) {
+      oldCamera = camera; // Update viewport
+
+      set(state => ({
+        viewport: { ...state.viewport,
+          ...state.viewport.getCurrentViewport(camera)
+        }
+      }));
+    }
+  }); // Invalidate on any change
+
+  rootStore.subscribe(state => invalidate(state)); // Return root state
+
+  return rootStore;
+};
+
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 } // https://github.com/facebook/react/tree/main/packages/react-reconciler#getcurrenteventpriority
@@ -428,9 +673,13 @@ function makeId(event) {
 
 
 function getEventPriority() {
-  var _window, _window$event;
+  var _globalScope$event;
 
-  let name = (_window = window) == null ? void 0 : (_window$event = _window.event) == null ? void 0 : _window$event.type;
+  // Get a handle to the current global scope in window and worker contexts if able
+  // https://github.com/pmndrs/react-three-fiber/pull/2493
+  const globalScope = typeof self !== 'undefined' && self || typeof window !== 'undefined' && window;
+  if (!globalScope) return constants.DefaultEventPriority;
+  const name = (_globalScope$event = globalScope.event) == null ? void 0 : _globalScope$event.type;
 
   switch (name) {
     case 'click':
@@ -489,9 +738,7 @@ function removeInteractivity(store, object) {
   });
 }
 function createEvents(store) {
-  const temp = new THREE__namespace.Vector3();
   /** Calculates delta */
-
   function calculateDistance(event) {
     const {
       internal
@@ -591,108 +838,113 @@ function createEvents(store) {
 
 
   function handleIntersects(intersections, event, delta, callback) {
-    const {
-      raycaster,
-      pointer,
-      camera,
-      internal
-    } = store.getState(); // If anything has been found, forward it to the event listeners
-
+    // If anything has been found, forward it to the event listeners
     if (intersections.length) {
-      const unprojectedPoint = temp.set(pointer.x, pointer.y, 0).unproject(camera);
       const localState = {
         stopped: false
       };
 
       for (const hit of intersections) {
-        const hasPointerCapture = id => {
-          var _internal$capturedMap, _internal$capturedMap2;
+        const state = getRootState(hit.object);
 
-          return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
-        };
+        if (state) {
+          const {
+            raycaster,
+            pointer,
+            camera,
+            internal
+          } = state;
+          const unprojectedPoint = new THREE__namespace.Vector3(pointer.x, pointer.y, 0).unproject(camera);
 
-        const setPointerCapture = id => {
-          const captureData = {
-            intersection: hit,
-            target: event.target
+          const hasPointerCapture = id => {
+            var _internal$capturedMap, _internal$capturedMap2;
+
+            return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
           };
 
-          if (internal.capturedMap.has(id)) {
-            // if the pointerId was previously captured, we add the hit to the
-            // event capturedMap.
-            internal.capturedMap.get(id).set(hit.eventObject, captureData);
-          } else {
-            // if the pointerId was not previously captured, we create a map
-            // containing the hitObject, and the hit. hitObject is used for
-            // faster access.
-            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
-          } // Call the original event now
-          event.target.setPointerCapture(id);
-        };
+          const setPointerCapture = id => {
+            const captureData = {
+              intersection: hit,
+              target: event.target
+            };
+
+            if (internal.capturedMap.has(id)) {
+              // if the pointerId was previously captured, we add the hit to the
+              // event capturedMap.
+              internal.capturedMap.get(id).set(hit.eventObject, captureData);
+            } else {
+              // if the pointerId was not previously captured, we create a map
+              // containing the hitObject, and the hit. hitObject is used for
+              // faster access.
+              internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
+            } // Call the original event now
+            event.target.setPointerCapture(id);
+          };
 
-        const releasePointerCapture = id => {
-          const captures = internal.capturedMap.get(id);
+          const releasePointerCapture = id => {
+            const captures = internal.capturedMap.get(id);
 
-          if (captures) {
-            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
-          }
-        }; // Add native event props
+            if (captures) {
+              releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+            }
+          }; // Add native event props
 
 
-        let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+          let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
 
-        for (let prop in event) {
-          let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
-          // called as event.nativeEvent.fn()
+          for (let prop in event) {
+            let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
+            // called as event.nativeEvent.fn()
 
-          if (typeof property !== 'function') extractEventProps[prop] = property;
-        }
+            if (typeof property !== 'function') extractEventProps[prop] = property;
+          }
 
-        let raycastEvent = { ...hit,
-          ...extractEventProps,
-          pointer,
-          intersections,
-          stopped: localState.stopped,
-          delta,
-          unprojectedPoint,
-          ray: raycaster.ray,
-          camera: camera,
-          // Hijack stopPropagation, which just sets a flag
-          stopPropagation: () => {
-            // https://github.com/pmndrs/react-three-fiber/issues/596
-            // Events are not allowed to stop propagation if the pointer has been captured
-            const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
-
-            if ( // ...if this pointer hasn't been captured
-            !capturesForPointer || // ... or if the hit object is capturing the pointer
-            capturesForPointer.has(hit.eventObject)) {
-              raycastEvent.stopped = localState.stopped = true; // Propagation is stopped, remove all other hover records
-              // An event handler is only allowed to flush other handlers if it is hovered itself
-
-              if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
-                // Objects cannot flush out higher up objects that have already caught the event
-                const higher = intersections.slice(0, intersections.indexOf(hit));
-                cancelPointer([...higher, hit]);
+          let raycastEvent = { ...hit,
+            ...extractEventProps,
+            pointer,
+            intersections,
+            stopped: localState.stopped,
+            delta,
+            unprojectedPoint,
+            ray: raycaster.ray,
+            camera: camera,
+            // Hijack stopPropagation, which just sets a flag
+            stopPropagation: () => {
+              // https://github.com/pmndrs/react-three-fiber/issues/596
+              // Events are not allowed to stop propagation if the pointer has been captured
+              const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
+
+              if ( // ...if this pointer hasn't been captured
+              !capturesForPointer || // ... or if the hit object is capturing the pointer
+              capturesForPointer.has(hit.eventObject)) {
+                raycastEvent.stopped = localState.stopped = true; // Propagation is stopped, remove all other hover records
+                // An event handler is only allowed to flush other handlers if it is hovered itself
+
+                if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
+                  // Objects cannot flush out higher up objects that have already caught the event
+                  const higher = intersections.slice(0, intersections.indexOf(hit));
+                  cancelPointer([...higher, hit]);
+                }
               }
-            }
-          },
-          // there should be a distinction between target and currentTarget
-          target: {
-            hasPointerCapture,
-            setPointerCapture,
-            releasePointerCapture
-          },
-          currentTarget: {
-            hasPointerCapture,
-            setPointerCapture,
-            releasePointerCapture
-          },
-          nativeEvent: event
-        }; // Call subscribers
-
-        callback(raycastEvent); // Event bubbling may be interrupted by stopPropagation
-
-        if (localState.stopped === true) break;
+            },
+            // there should be a distinction between target and currentTarget
+            target: {
+              hasPointerCapture,
+              setPointerCapture,
+              releasePointerCapture
+            },
+            currentTarget: {
+              hasPointerCapture,
+              setPointerCapture,
+              releasePointerCapture
+            },
+            nativeEvent: event
+          }; // Call subscribers
+
+          callback(raycastEvent); // Event bubbling may be interrupted by stopPropagation
+
+          if (localState.stopped === true) break;
+        }
       }
     }
 
@@ -709,11 +961,11 @@ function createEvents(store) {
       if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
         const instance = eventObject.__r3f;
-        const handlers = instance == null ? void 0 : instance.handlers;
         internal.hovered.delete(makeId(hoveredObj));
 
         if (instance != null && instance.eventCount) {
-          // Clear out intersects, they are outdated by now
+          const handlers = instance.handlers; // Clear out intersects, they are outdated by now
+
           const data = { ...hoveredObj,
             intersections
           };
@@ -780,10 +1032,10 @@ function createEvents(store) {
       if (isPointerMove) cancelPointer(hits);
       handleIntersects(hits, event, delta, data => {
         const eventObject = data.eventObject;
-        const instance = eventObject.__r3f;
-        const handlers = instance == null ? void 0 : instance.handlers; // Check presence of handlers
+        const instance = eventObject.__r3f; // Check presence of handlers
 
         if (!(instance != null && instance.eventCount)) return;
+        const handlers = instance.handlers;
 
         if (isPointerMove) {
           // Move event ...
@@ -842,634 +1094,296 @@ function createEvents(store) {
   };
 }
 
-let catalogue = {};
-
-let extend = objects => void (catalogue = { ...catalogue,
-  ...objects
-});
+const catalogue = {};
 
-function createRenderer(_roots, _getEventPriority) {
-  function createInstance(type, {
-    args = [],
-    attach,
-    ...props
-  }, root) {
-    let name = `${type[0].toUpperCase()}${type.slice(1)}`;
-    let instance; // Auto-attach geometries and materials
-
-    if (attach === undefined) {
-      if (name.endsWith('Geometry')) attach = 'geometry';else if (name.endsWith('Material')) attach = 'material';
-    }
+const extend = objects => void Object.assign(catalogue, objects);
 
-    if (type === 'primitive') {
-      if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
-      const object = props.object;
-      instance = prepare(object, {
-        type,
-        root,
-        attach,
-        primitive: true
-      });
-    } else {
-      const target = catalogue[name];
+function createInstance(type, props, root) {
+  var _props$object, _props$args;
 
-      if (!target) {
-        throw `${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`;
-      } // Throw if an object or literal was passed for args
+  // Get target from catalogue
+  const name = `${type[0].toUpperCase()}${type.slice(1)}`;
+  const target = catalogue[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`); // Validate primitives
 
-      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
-      // Append memoized props with args so it's not forgotten
+  if (type === 'primitive' && !props.object) throw new Error(`R3F: Primitives without 'object' are invalid!`); // Throw if an object or literal was passed for args
 
-      instance = prepare(new target(...args), {
-        type,
-        root,
-        attach,
-        // Save args in case we need to reconstruct later for HMR
-        memoizedProps: {
-          args
-        }
-      });
-    } // It should NOT call onUpdate on object instanciation, because it hasn't been added to the
-    // view yet. If the callback relies on references for instance, they won't be ready yet, this is
-    // why it passes "true" here
-    // There is no reason to apply props to injects
+  if (props.args !== undefined && !Array.isArray(props.args)) throw new Error('R3F: The args prop must be an array!'); // Create instance
 
+  const object = (_props$object = props.object) != null ? _props$object : new target(...((_props$args = props.args) != null ? _props$args : []));
+  const instance = prepare(object, root, type, props); // Auto-attach geometries and materials
 
-    if (name !== 'inject') applyProps$1(instance, props);
-    return instance;
-  }
+  if (instance.props.attach === undefined) {
+    if (instance.object instanceof THREE__namespace.BufferGeometry) instance.props.attach = 'geometry';else if (instance.object instanceof THREE__namespace.Material) instance.props.attach = 'material';
+  } // Set initial props
 
-  function appendChild(parentInstance, child) {
-    let added = false;
 
-    if (child) {
-      var _child$__r3f, _parentInstance$__r3f;
+  applyProps(instance.object, props);
+  return instance;
+} // https://github.com/facebook/react/issues/20271
+// This will make sure events and attach are only handled once when trees are complete
 
-      // The attach attribute implies that the object attaches itself on the parent
-      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
-        // add in the usual parent-child way
-        parentInstance.add(child);
-        added = true;
-      } // This is for anything that used attach, and for non-Object3Ds that don't get attached to props;
-      // that is, anything that's a child in React but not a child in the scenegraph.
 
+function handleContainerEffects(parent, child) {
+  // Bail if tree isn't mounted or parent is not a container.
+  // This ensures that the tree is finalized and React won't discard results to Suspense
+  const state = child.root.getState();
+  if (!parent.parent && parent.object !== state.scene) return; // Handle interactivity
 
-      if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
-      if (!child.__r3f) prepare(child, {});
-      child.__r3f.parent = parentInstance;
-      updateInstance(child);
-      invalidateInstance(child);
-    }
-  }
+  if (child.eventCount > 0 && child.object.raycast !== null && child.object instanceof THREE__namespace.Object3D) {
+    state.internal.interaction.push(child.object);
+  } // Handle attach
 
-  function insertBefore(parentInstance, child, beforeChild) {
-    let added = false;
 
-    if (child) {
-      var _child$__r3f2, _parentInstance$__r3f2;
+  if (child.props.attach) attach(parent, child);
 
-      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
-        child.parent = parentInstance;
-        child.dispatchEvent({
-          type: 'added'
-        });
-        const restSiblings = parentInstance.children.filter(sibling => sibling !== child);
-        const index = restSiblings.indexOf(beforeChild);
-        parentInstance.children = [...restSiblings.slice(0, index), child, ...restSiblings.slice(index)];
-        added = true;
-      }
+  for (const childInstance of child.children) handleContainerEffects(child, childInstance);
+}
 
-      if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
-      if (!child.__r3f) prepare(child, {});
-      child.__r3f.parent = parentInstance;
-      updateInstance(child);
-      invalidateInstance(child);
-    }
-  }
+function appendChild(parent, child) {
+  if (!child) return; // Link instances
 
-  function removeRecursive(array, parent, dispose = false) {
-    if (array) [...array].forEach(child => removeChild(parent, child, dispose));
-  }
+  child.parent = parent;
+  parent.children.push(child); // Add Object3Ds if able
 
-  function removeChild(parentInstance, child, dispose) {
-    if (child) {
-      var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
+  if (!child.props.attach && parent.object instanceof THREE__namespace.Object3D && child.object instanceof THREE__namespace.Object3D) {
+    parent.object.add(child.object);
+  } // Attach tree once complete
 
-      // Clear the parent reference
-      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
-      if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
+  handleContainerEffects(parent, child); // Tree was updated, request a frame
 
-      if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
-        detach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
-        var _child$__r3f4;
+  invalidateInstance(child);
+}
 
-        parentInstance.remove(child); // Remove interactivity
+function insertBefore(parent, child, beforeChild, replace = false) {
+  if (!child || !beforeChild) return; // Link instances
 
-        if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
-          removeInteractivity(child.__r3f.root, child);
-        }
-      } // Allow objects to bail out of recursive dispose altogether by passing dispose={null}
-      // Never dispose of primitives because their state may be kept outside of React!
-      // In order for an object to be able to dispose it has to have
-      //   - a dispose method,
-      //   - it cannot be a <primitive object={...} />
-      //   - it cannot be a THREE.Scene, because three has broken it's own api
-      //
-      // Since disposal is recursive, we can check the optional dispose arg, which will be undefined
-      // when the reconciler calls it, but then carry our own check recursively
+  child.parent = parent;
+  const childIndex = parent.children.indexOf(beforeChild);
+  if (childIndex !== -1) parent.children.splice(childIndex, replace ? 1 : 0, child);
+  if (replace) beforeChild.parent = null; // Manually splice Object3Ds
 
+  if (!child.props.attach && parent.object instanceof THREE__namespace.Object3D && child.object instanceof THREE__namespace.Object3D && beforeChild.object instanceof THREE__namespace.Object3D) {
+    child.object.parent = parent.object;
+    parent.object.children.splice(parent.object.children.indexOf(beforeChild.object), 0, child.object);
+    child.object.dispatchEvent({
+      type: 'added'
+    });
+  } // Attach tree once complete
 
-      const isPrimitive = (_child$__r3f5 = child.__r3f) == null ? void 0 : _child$__r3f5.primitive;
-      const shouldDispose = dispose === undefined ? child.dispose !== null && !isPrimitive : dispose; // Remove nested child objects. Primitives should not have objects and children that are
-      // attached to them declaratively ...
 
-      if (!isPrimitive) {
-        var _child$__r3f6;
+  handleContainerEffects(parent, child); // Tree was updated, request a frame
 
-        removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
-        removeRecursive(child.children, child, shouldDispose);
-      } // Remove references
+  invalidateInstance(child);
+}
 
+function removeChild(parent, child, dispose, recursive) {
+  if (!child) return; // Unlink instances
 
-      if (child.__r3f) {
-        delete child.__r3f.root;
-        delete child.__r3f.objects;
-        delete child.__r3f.handlers;
-        delete child.__r3f.memoizedProps;
-        if (!isPrimitive) delete child.__r3f;
-      } // Dispose item whenever the reconciler feels like it
+  child.parent = null;
 
+  if (recursive === undefined) {
+    const childIndex = parent.children.indexOf(child);
+    if (childIndex !== -1) parent.children.splice(childIndex, 1);
+  } // Eagerly tear down tree
 
-      if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        scheduler.unstable_scheduleCallback(scheduler.unstable_IdlePriority, () => {
-          try {
-            child.dispose();
-          } catch (e) {
-            /* ... */
-          }
-        });
-      }
 
-      invalidateInstance(parentInstance);
-    }
-  }
+  if (child.props.attach) {
+    detach(parent, child);
+  } else if (child.object instanceof THREE__namespace.Object3D && parent.object instanceof THREE__namespace.Object3D) {
+    parent.object.remove(child.object);
+    removeInteractivity(child.root, child.object);
+  } // Allow objects to bail out of unmount disposal with dispose={null}
 
-  function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f;
 
-    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
-    if (!parent) return;
-    const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
-    // When args change the instance has to be re-constructed, which then
-    // forces r3f to re-parent the children and non-scene objects
-    // This can not include primitives, which should not have declarative children
+  const shouldDispose = child.props.dispose !== null && dispose !== false; // Recursively remove instance children
 
-    if (type !== 'primitive' && instance.children) {
-      instance.children.forEach(child => appendChild(newInstance, child));
-      instance.children = [];
-    }
+  if (recursive !== false) {
+    for (const node of child.children) removeChild(child, node, shouldDispose, true);
 
-    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
+    child.children = [];
+  } // Unlink instance object
 
-    instance.__r3f.objects = [];
-    removeChild(parent, instance);
-    appendChild(parent, newInstance); // Re-bind event handlers
 
-    if (newInstance.raycast && newInstance.__r3f.eventCount) {
-      const rootState = newInstance.__r3f.root.getState();
+  delete child.object.__r3f; // Dispose object whenever the reconciler feels like it.
+  // Never dispose of primitives because their state may be kept outside of React!
+  // In order for an object to be able to dispose it
+  //   - has a dispose method
+  //   - cannot be a <primitive object={...} />
+  //   - cannot be a THREE.Scene, because three has broken its own API
 
-      rootState.internal.interaction.push(newInstance);
-    } // This evil hack switches the react-internal fiber node
-    [fiber, fiber.alternate].forEach(fiber => {
-      if (fiber !== null) {
-        fiber.stateNode = newInstance;
+  if (shouldDispose && child.type !== 'primitive' && child.object.type !== 'Scene') {
+    const dispose = child.object.dispose;
 
-        if (fiber.ref) {
-          if (typeof fiber.ref === 'function') fiber.ref(newInstance);else fiber.ref.current = newInstance;
+    if (typeof dispose === 'function') {
+      scheduler.unstable_scheduleCallback(scheduler.unstable_IdlePriority, () => {
+        try {
+          dispose();
+        } catch (e) {
+          /* ... */
         }
-      }
-    });
-  } // Don't handle text instances, warn on undefined behavior
-
-
-  const handleTextInstance = () => console.warn('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
-
-  const reconciler = Reconciler__default["default"]({
-    createInstance,
-    removeChild,
-    appendChild,
-    appendInitialChild: appendChild,
-    insertBefore,
-    supportsMutation: true,
-    isPrimaryRenderer: false,
-    supportsPersistence: false,
-    supportsHydration: false,
-    noTimeout: -1,
-    appendChildToContainer: (container, child) => {
-      if (!child) return;
-      const scene = container.getState().scene; // Link current root to the default scene
-
-      scene.__r3f.root = container;
-      appendChild(scene, child);
-    },
-    removeChildFromContainer: (container, child) => {
-      if (!child) return;
-      removeChild(container.getState().scene, child);
-    },
-    insertInContainerBefore: (container, child, beforeChild) => {
-      if (!child || !beforeChild) return;
-      insertBefore(container.getState().scene, child, beforeChild);
-    },
-    getRootHostContext: () => null,
-    getChildHostContext: parentHostContext => parentHostContext,
-
-    finalizeInitialChildren(instance) {
-      var _instance$__r3f2;
-
-      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
-      // Returning true will trigger commitMount
-
-      return Boolean(localState.handlers);
-    },
-
-    prepareUpdate(instance, _type, oldProps, newProps) {
-      // Create diff-sets
-      if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
-        return [true];
-      } else {
-        // This is a data object, let's extract critical information about it
-        const {
-          args: argsNew = [],
-          children: cN,
-          ...restNew
-        } = newProps;
-        const {
-          args: argsOld = [],
-          children: cO,
-          ...restOld
-        } = oldProps; // Throw if an object or literal was passed for args
-
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
-
-        if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
-
-        const diff = diffProps(instance, restNew, restOld, true);
-        if (diff.changes.length) return [false, diff]; // Otherwise do not touch the instance
-
-        return null;
-      }
-    },
-
-    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
-      // Reconstruct when args or <primitive object={...} have changes
-      if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
-      else applyProps$1(instance, diff);
-    },
-
-    commitMount(instance, _type, _props, _int) {
-      var _instance$__r3f3;
-
-      // https://github.com/facebook/react/issues/20271
-      // This will make sure events are only added once to the central container
-      const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
-
-      if (instance.raycast && localState.handlers && localState.eventCount) {
-        instance.__r3f.root.getState().internal.interaction.push(instance);
-      }
-    },
-
-    getPublicInstance: instance => instance,
-    prepareForCommit: () => null,
-    preparePortalMount: container => prepare(container.getState().scene),
-    resetAfterCommit: () => {},
-    shouldSetTextContent: () => false,
-    clearContainer: () => false,
-
-    hideInstance(instance) {
-      var _instance$__r3f4;
-
-      // Deatch while the instance is hidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
-      if (type && parent) detach(parent, instance, type);
-      if (instance.isObject3D) instance.visible = false;
-      invalidateInstance(instance);
-    },
-
-    unhideInstance(instance, props) {
-      var _instance$__r3f5;
+      });
+    }
+  } // Tree was updated, request a frame for top-level instance
 
-      // Re-attach when the instance is unhidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
-      if (type && parent) attach(parent, instance, type);
-      if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
-      invalidateInstance(instance);
-    },
 
-    createTextInstance: handleTextInstance,
-    hideTextInstance: handleTextInstance,
-    unhideTextInstance: handleTextInstance,
-    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-    // @ts-ignore
-    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
-    beforeActiveInstanceBlur: () => {},
-    afterActiveInstanceBlur: () => {},
-    detachDeletedInstance: () => {},
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
-    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
-    scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
-  });
-  return {
-    reconciler,
-    applyProps: applyProps$1
-  };
+  if (dispose === undefined) invalidateInstance(child);
 }
 
-// Keys that shouldn't be copied between R3F stores
-const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'size', 'viewport'];
-const isRenderer = def => !!(def != null && def.render);
-const context = /*#__PURE__*/React__namespace.createContext(null);
-
-const createStore = (invalidate, advance) => {
-  const rootState = create__default["default"]((set, get) => {
-    const position = new THREE__namespace.Vector3();
-    const defaultTarget = new THREE__namespace.Vector3();
-    const tempTarget = new THREE__namespace.Vector3();
-
-    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
-      const {
-        width,
-        height,
-        top,
-        left
-      } = size;
-      const aspect = width / height;
-      if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
-      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
-
-      if (isOrthographicCamera(camera)) {
-        return {
-          width: width / camera.zoom,
-          height: height / camera.zoom,
-          top,
-          left,
-          factor: 1,
-          distance,
-          aspect
-        };
-      } else {
-        const fov = camera.fov * Math.PI / 180; // convert vertical fov to radians
+function switchInstance(oldInstance, type, props, fiber) {
+  // Create a new instance
+  const newInstance = createInstance(type, props, oldInstance.root); // Move children to new instance
 
-        const h = 2 * Math.tan(fov / 2) * distance; // visible height
+  for (const child of oldInstance.children) {
+    removeChild(oldInstance, child, false, false);
+    appendChild(newInstance, child);
+  }
 
-        const w = h * (width / height);
-        return {
-          width: w,
-          height: h,
-          top,
-          left,
-          factor: width / w,
-          distance,
-          aspect
-        };
+  oldInstance.children = []; // Link up new instance
+
+  const parent = oldInstance.parent;
+
+  if (parent) {
+    insertBefore(parent, newInstance, oldInstance, true);
+  } // This evil hack switches the react-internal fiber node
+  [fiber, fiber.alternate].forEach(fiber => {
+    if (fiber !== null) {
+      fiber.stateNode = newInstance;
+
+      if (fiber.ref) {
+        if (typeof fiber.ref === 'function') fiber.ref(newInstance.object);else fiber.ref.current = newInstance.object;
       }
     }
+  }); // Tree was updated, request a frame
 
-    let performanceTimeout = undefined;
+  invalidateInstance(newInstance);
+  return newInstance;
+} // Don't handle text instances, warn on undefined behavior
 
-    const setPerformanceCurrent = current => set(state => ({
-      performance: { ...state.performance,
-        current
-      }
-    }));
 
-    const pointer = new THREE__namespace.Vector2();
-    const rootState = {
-      set,
-      get,
-      // Mock objects that have to be configured
-      gl: null,
-      camera: null,
-      raycaster: null,
-      events: {
-        priority: 1,
-        enabled: true,
-        connected: false
-      },
-      xr: null,
-      invalidate: (frames = 1) => invalidate(get(), frames),
-      advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
-      legacy: false,
-      linear: false,
-      flat: false,
-      scene: prepare(new THREE__namespace.Scene()),
-      controls: null,
-      clock: new THREE__namespace.Clock(),
-      pointer,
-      mouse: pointer,
-      frameloop: 'always',
-      onPointerMissed: undefined,
-      performance: {
-        current: 1,
-        min: 0.5,
-        max: 1,
-        debounce: 200,
-        regress: () => {
-          const state = get(); // Clear timeout
+const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
 
-          if (performanceTimeout) clearTimeout(performanceTimeout); // Set lower bound performance
+const reconciler = Reconciler__default["default"]({
+  supportsMutation: true,
+  isPrimaryRenderer: false,
+  supportsPersistence: false,
+  supportsHydration: false,
+  noTimeout: -1,
+  createInstance,
+  removeChild,
+  appendChild,
+  appendInitialChild: appendChild,
+  insertBefore,
 
-          if (state.performance.current !== state.performance.min) setPerformanceCurrent(state.performance.min); // Go back to upper bound performance after a while unless something regresses meanwhile
+  appendChildToContainer(container, child) {
+    const scene = container.getState().scene.__r3f;
 
-          performanceTimeout = setTimeout(() => setPerformanceCurrent(get().performance.max), state.performance.debounce);
-        }
-      },
-      size: {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        updateStyle: false
-      },
-      viewport: {
-        initialDpr: 0,
-        dpr: 0,
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        aspect: 0,
-        distance: 0,
-        factor: 0,
-        getCurrentViewport
-      },
-      setEvents: events => set(state => ({ ...state,
-        events: { ...state.events,
-          ...events
-        }
-      })),
-      setSize: (width, height, updateStyle, top, left) => {
-        const camera = get().camera;
-        const size = {
-          width,
-          height,
-          top: top || 0,
-          left: left || 0,
-          updateStyle
-        };
-        set(state => ({
-          size,
-          viewport: { ...state.viewport,
-            ...getCurrentViewport(camera, defaultTarget, size)
-          }
-        }));
-      },
-      setDpr: dpr => set(state => {
-        const resolved = calculateDpr(dpr);
-        return {
-          viewport: { ...state.viewport,
-            dpr: resolved,
-            initialDpr: state.viewport.initialDpr || resolved
-          }
-        };
-      }),
-      setFrameloop: frameloop => {
-        var _frameloop$mode, _frameloop$render, _frameloop$maxDelta;
+    if (!child || !scene) return;
+    appendChild(scene, child);
+  },
 
-        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; // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+  removeChildFromContainer(container, child) {
+    const scene = container.getState().scene.__r3f;
 
-        clock.stop();
-        clock.elapsedTime = 0;
+    if (!child || !scene) return;
+    removeChild(scene, child);
+  },
 
-        if (frameloop !== 'never') {
-          clock.start();
-          clock.elapsedTime = 0;
-        }
+  insertInContainerBefore(container, child, beforeChild) {
+    const scene = container.getState().scene.__r3f;
 
-        set(() => ({
-          frameloop: mode,
-          internal: { ...state.internal,
-            render,
-            maxDelta
-          }
-        }));
-      },
-      previousRoot: undefined,
-      internal: {
-        // Events
-        interaction: [],
-        hovered: new Map(),
-        subscribers: [],
-        initialClick: [0, 0],
-        initialHits: [],
-        capturedMap: new Map(),
-        lastEvent: /*#__PURE__*/React__namespace.createRef(),
-        // Updates
-        active: false,
-        frames: 0,
-        stages: [],
-        render: 'auto',
-        maxDelta: 1 / 10,
-        priority: 0,
-        subscribe: (ref, priority, store) => {
-          const state = get();
-          const internal = state.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
+    if (!child || !beforeChild || !scene) return;
+    insertBefore(scene, child, beforeChild);
+  },
 
-          internal.priority = internal.priority + (priority > 0 ? 1 : 0); // We use the render flag and deprecate priority
+  getRootHostContext: () => null,
+  getChildHostContext: parentHostContext => parentHostContext,
 
-          if (internal.priority && state.internal.render === 'auto') set(() => ({
-            internal: { ...state.internal,
-              render: 'manual'
-            }
-          }));
-          internal.subscribers.push({
-            ref,
-            priority,
-            store
-          }); // Register subscriber and sort layers from lowest to highest, meaning,
-          // highest priority renders last (on top of the other frames)
+  prepareUpdate(instance, _type, oldProps, newProps) {
+    var _newProps$args, _oldProps$args, _newProps$args2;
 
-          internal.subscribers = internal.subscribers.sort((a, b) => a.priority - b.priority);
-          return () => {
-            const state = get();
-            const internal = state.internal;
+    // Reconstruct primitives if object prop changes
+    if (instance.type === 'primitive' && oldProps.object !== newProps.object) return [true]; // Throw if an object or literal was passed for args
 
-            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 (newProps.args !== undefined && !Array.isArray(newProps.args)) throw new Error('R3F: The args prop must be an array!'); // Reconstruct instance if args change
 
-              if (!internal.priority && state.internal.render === 'manual') set(() => ({
-                internal: { ...state.internal,
-                  render: 'auto'
-                }
-              })); // Remove subscriber from list
+    if (((_newProps$args = newProps.args) == null ? void 0 : _newProps$args.length) !== ((_oldProps$args = oldProps.args) == null ? void 0 : _oldProps$args.length)) return [true];
+    if ((_newProps$args2 = newProps.args) != null && _newProps$args2.some((value, index) => {
+      var _oldProps$args2;
 
-              internal.subscribers = internal.subscribers.filter(s => s.ref !== ref);
-            }
-          };
-        }
-      }
-    };
-    return rootState;
-  });
-  const state = rootState.getState();
-  let oldSize = state.size;
-  let oldDpr = state.viewport.dpr;
-  let oldCamera = state.camera;
-  rootState.subscribe(() => {
-    const {
-      camera,
-      size,
-      viewport,
-      gl,
-      set
-    } = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
+      return value !== ((_oldProps$args2 = oldProps.args) == null ? void 0 : _oldProps$args2[index]);
+    })) return [true]; // Create a diff-set, flag if there are any changes
 
-    if (size !== oldSize || viewport.dpr !== oldDpr) {
-      oldSize = size;
-      oldDpr = viewport.dpr; // Update camera & renderer
+    const changedProps = diffProps(instance, newProps, true);
+    if (Object.keys(changedProps).length) return [false, changedProps]; // Otherwise do not touch the instance
 
-      updateCamera(camera, size);
-      gl.setPixelRatio(viewport.dpr);
-      gl.setSize(size.width, size.height, size.updateStyle);
-    } // Update viewport once the camera changes
+    return null;
+  },
 
+  commitUpdate(instance, diff, type, _oldProps, newProps, fiber) {
+    const [reconstruct, changedProps] = diff; // Reconstruct when args or <primitive object={...} have changes
 
-    if (camera !== oldCamera) {
-      oldCamera = camera; // Update viewport
+    if (reconstruct) return switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
 
-      set(state => ({
-        viewport: { ...state.viewport,
-          ...state.viewport.getCurrentViewport(camera)
-        }
-      }));
+    Object.assign(instance.props, changedProps);
+    applyProps(instance.object, changedProps);
+  },
+
+  finalizeInitialChildren: () => false,
+
+  commitMount() {},
+
+  getPublicInstance: instance => instance == null ? void 0 : instance.object,
+  prepareForCommit: () => null,
+  preparePortalMount: container => prepare(container.getState().scene, container, '', {}),
+  resetAfterCommit: () => {},
+  shouldSetTextContent: () => false,
+  clearContainer: () => false,
+
+  hideInstance(instance) {
+    var _instance$parent;
+
+    if (instance.props.attach && (_instance$parent = instance.parent) != null && _instance$parent.object) {
+      detach(instance.parent, instance);
+    } else if (instance.object instanceof THREE__namespace.Object3D) {
+      instance.object.visible = false;
     }
-  }); // Invalidate on any change
 
-  rootState.subscribe(state => invalidate(state)); // Return root state
+    instance.isHidden = true;
+    invalidateInstance(instance);
+  },
+
+  unhideInstance(instance) {
+    if (instance.isHidden) {
+      var _instance$parent2;
 
-  return rootState;
-};
+      if (instance.props.attach && (_instance$parent2 = instance.parent) != null && _instance$parent2.object) {
+        attach(instance.parent, instance);
+      } else if (instance.object instanceof THREE__namespace.Object3D && instance.props.visible !== false) {
+        instance.object.visible = true;
+      }
+    }
+
+    instance.isHidden = false;
+    invalidateInstance(instance);
+  },
+
+  createTextInstance: handleTextInstance,
+  hideTextInstance: handleTextInstance,
+  unhideTextInstance: handleTextInstance,
+  // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
+  // @ts-ignore
+  getCurrentEventPriority: () => getEventPriority(),
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  detachDeletedInstance: () => {},
+  now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+  // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
+  scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
+  cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+});
 
 function createSubs(callback, subs) {
   const sub = {
@@ -1501,11 +1415,25 @@ const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
 const addTail = callback => createSubs(callback, globalTailEffects);
 
 function run(effects, timestamp) {
+  if (!effects.size) return;
   effects.forEach(({
     callback
   }) => callback(timestamp));
 }
 
+function flushGlobalEffects(type, timestamp) {
+  switch (type) {
+    case 'before':
+      return run(globalEffects, timestamp);
+
+    case 'after':
+      return run(globalAfterEffects, timestamp);
+
+    case 'tail':
+      return run(globalTailEffects, timestamp);
+  }
+}
+
 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
@@ -1538,7 +1466,7 @@ function createLoop(roots) {
     running = true;
     repeat = 0; // Run effects
 
-    if (globalEffects.size) run(globalEffects, timestamp); // Render all roots
+    flushGlobalEffects('before', timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
@@ -1550,11 +1478,11 @@ function createLoop(roots) {
       }
     }); // Run after-effects
 
-    if (globalAfterEffects.size) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
+    flushGlobalEffects('after', timestamp); // Stop the loop if nothing invalidates it
 
     if (repeat === 0) {
       // Tail call effects, they are called when rendering stops
-      if (globalTailEffects.size) run(globalTailEffects, timestamp); // Flag end of operation
+      flushGlobalEffects('tail', timestamp); // Flag end of operation
 
       running = false;
       return cancelAnimationFrame(frame);
@@ -1576,9 +1504,9 @@ function createLoop(roots) {
   }
 
   function advance(timestamp, runGlobalEffects = true, state, frame) {
-    if (runGlobalEffects) run(globalEffects, timestamp);
+    if (runGlobalEffects) flushGlobalEffects('before', timestamp);
     if (!state) roots.forEach(root => update(timestamp, root.store.getState()));else update(timestamp, state, frame);
-    if (runGlobalEffects) run(globalAfterEffects, timestamp);
+    if (runGlobalEffects) flushGlobalEffects('after', timestamp);
   }
 
   return {
@@ -1746,9 +1674,20 @@ const Stages = {
 };
 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
+ *
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
+ */
+function useInstanceHandle(ref) {
+  const instance = React__namespace.useRef(null);
+  useIsomorphicLayoutEffect(() => void (instance.current = ref.current.__r3f), [ref]);
+  return instance;
+}
 function useStore() {
   const store = React__namespace.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
   return store;
 }
 /**
@@ -1807,7 +1746,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message})`))))));
   };
 }
 /**
@@ -1850,10 +1789,6 @@ const {
   invalidate,
   advance
 } = createLoop(roots);
-const {
-  reconciler,
-  applyProps
-} = createRenderer(roots, getEventPriority);
 const shallowLoose = {
   objects: 'shallow',
   strict: false
@@ -1871,19 +1806,19 @@ const createRendererInstance = (gl, canvas) => {
 };
 
 const createStages = (stages, store) => {
-  var _stages;
-
   const state = store.getState();
   let subscribers;
   let subscription;
-  stages = (_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.';
+
+  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
+      stages: _stages
     }
   })); // Add useFrame loop to update stage
 
@@ -1907,11 +1842,36 @@ const createStages = (stages, store) => {
   Stages.Render.add(renderCallback, store);
 };
 
+function computeInitialSize(canvas, size) {
+  if (!size && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
+    const {
+      width,
+      height,
+      top,
+      left
+    } = canvas.parentElement.getBoundingClientRect();
+    return {
+      width,
+      height,
+      top,
+      left
+    };
+  }
+
+  return {
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    ...size
+  };
+}
+
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
-  let prevRoot = roots.get(canvas);
-  let prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
-  let prevStore = prevRoot == null ? void 0 : prevRoot.store;
+  const prevRoot = roots.get(canvas);
+  const prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
+  const prevStore = prevRoot == null ? void 0 : prevRoot.store;
   if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Report when an error was detected in a previous render
   // https://github.com/pmndrs/react-three-fiber/pull/2261
 
@@ -1935,7 +1895,7 @@ function createRoot(canvas) {
     configure(props = {}) {
       let {
         gl: glConfig,
-        size,
+        size: propsSize,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -2065,20 +2025,10 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || (canvas.parentElement ? {
-        width: canvas.parentElement.clientWidth,
-        height: canvas.parentElement.clientHeight,
-        top: canvas.parentElement.clientTop,
-        left: canvas.parentElement.clientLeft
-      } : {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      });
+      const size = computeInitialSize(canvas, propsSize);
 
       if (!is.equ(size, state.size, shallowLoose)) {
-        state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
+        state.setSize(size.width, size.height, size.top, size.left);
       } // Check frameloop
 
 
@@ -2092,9 +2042,9 @@ function createRoot(canvas) {
         performance: { ...state.performance,
           ...performance
         }
-      })); // Create update stages.
+      })); // Create update stages. Only do this once on init
 
-      if (stages !== state.internal.stages) createStages(stages, store); // Set locals
+      if (state.internal.stages.length === 0) createStages(stages, store); // Set locals
 
       onCreated = onCreatedCallback;
       configured = true;
@@ -2169,7 +2119,7 @@ function unmountComponentAtNode(canvas, callback) {
             (_state$gl = state.gl) == null ? void 0 : (_state$gl$renderLists = _state$gl.renderLists) == null ? void 0 : _state$gl$renderLists.dispose == null ? void 0 : _state$gl$renderLists.dispose();
             (_state$gl2 = state.gl) == null ? void 0 : _state$gl2.forceContextLoss == null ? void 0 : _state$gl2.forceContextLoss();
             if ((_state$gl3 = state.gl) != null && _state$gl3.xr) state.xr.disconnect();
-            dispose(state);
+            dispose(state.scene);
             roots.delete(canvas);
             if (callback) callback(canvas);
           } catch (e) {
@@ -2304,6 +2254,10 @@ reconciler.injectIntoDevTools({
   rendererPackageName: '@react-three/fiber',
   version: React__namespace.version
 });
+
+/**
+ * Safely flush async effects when testing, simulating a legacy root.
+ */
 const act = React__namespace.unstable_act;
 
 exports.Block = Block;
@@ -2325,13 +2279,14 @@ exports.dispose = dispose;
 exports.extend = extend;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
+exports.isRef = isRef;
 exports.reconciler = reconciler;
 exports.render = render;
 exports.roots = roots;
-exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
+exports.useInstanceHandle = useInstanceHandle;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
 exports.useMutableCallback = useMutableCallback;