@react-three/fiber 8.0.0-beta-05 → 8.0.0-beta.10

package/dist/{index-95c17855.cjs.dev.js → index-012f96fe.cjs.dev.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var React = require('react');
-var suspendReact = require('suspend-react');
 var THREE = require('three');
+var React = require('react');
 var constants = require('react-reconciler/constants');
 var create = require('zustand');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
+var suspendReact = require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -30,8 +30,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var create__default = /*#__PURE__*/_interopDefault(create);
 var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 
@@ -44,6 +44,15 @@ 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;
 }
+/**
+ * Returns instance root state
+ */
+
+const getRootState = obj => {
+  var _r3f;
+
+  return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
+};
 /**
  * Picks or omits keys from an object
  * `omit` will filter out keys, and otherwise cherry-pick them.
@@ -53,11 +62,7 @@ function filterKeys(obj, omit, ...keys) {
   const keysToSelect = new Set(keys);
   return Object.entries(obj).reduce((acc, [key, value]) => {
     const shouldInclude = !omit;
-
-    if (keysToSelect.has(key) === shouldInclude) {
-      acc[key] = value;
-    }
-
+    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
     return acc;
   }, {});
 }
@@ -70,31 +75,46 @@ const pick = (obj, keys) => filterKeys(obj, false, ...keys);
  * Clones an object and prunes or omits keys.
  */
 
-const omit = (obj, keys) => filterKeys(obj, true, ...keys); // A collection of compare functions
-
+const omit = (obj, keys) => filterKeys(obj, true, ...keys);
+// A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
   fun: a => typeof a === 'function',
   str: a => typeof a === 'string',
   num: a => typeof a === 'number',
+  boo: a => typeof a === 'boolean',
   und: a => a === void 0,
   arr: a => Array.isArray(a),
 
-  equ(a, b) {
+  equ(a, b, {
+    arrays = 'shallow',
+    objects = 'reference',
+    strict = true
+  } = {}) {
     // Wrong type or one of the two undefined, doesn't match
     if (typeof a !== typeof b || !!a !== !!b) return false; // Atomic, just compare a against b
 
-    if (is.str(a) || is.num(a) || is.obj(a)) return a === b; // Array, shallow compare first to see if it's a match
+    if (is.str(a) || is.num(a)) return a === b;
+    const isObj = is.obj(a);
+    if (isObj && objects === 'reference') return a === b;
+    const isArr = is.arr(a);
+    if (isArr && arrays === 'reference') return a === b; // Array or Object, shallow compare first to see if it's a match
 
-    if (is.arr(a) && a == b) return true; // Last resort, go through keys
+    if ((isArr || isObj) && a === b) return true; // Last resort, go through keys
 
     let i;
 
     for (i in a) if (!(i in b)) return false;
 
-    for (i in b) if (a[i] !== b[i]) return false;
+    for (i in strict ? b : a) if (a[i] !== b[i]) return false;
+
+    if (is.und(i)) {
+      if (isArr && a.length === 0 && b.length === 0) return true;
+      if (isObj && Object.keys(a).length === 0 && Object.keys(b).length === 0) return true;
+      if (a !== b) return false;
+    }
 
-    return is.und(i) ? a === b : true;
+    return true;
   }
 
 }; // Collects nodes and materials from a THREE.Object3D
@@ -129,7 +149,9 @@ function prepare(object, state) {
 
   if (state != null && state.primitive || !instance.__r3f) {
     instance.__r3f = {
+      type: '',
       root: null,
+      previousAttach: null,
       memoizedProps: {},
       eventCount: 0,
       handlers: {},
@@ -157,41 +179,44 @@ function resolve(instance, key) {
     target,
     key
   };
-}
+} // Checks if a dash-cased string ends with an integer
+
 
+const INDEX_REGEX = /-\d+$/;
 function attach(parent, child, type) {
   if (is.str(type)) {
+    // If attaching into an array (foo-0), create one
+    if (INDEX_REGEX.test(type)) {
+      const root = type.replace(INDEX_REGEX, '');
+      const {
+        target,
+        key
+      } = resolve(parent, root);
+      if (!Array.isArray(target[key])) target[key] = [];
+    }
+
     const {
       target,
       key
     } = resolve(parent, type);
-    parent.__r3f.previousAttach = target[key];
+    child.__r3f.previousAttach = target[key];
     target[key] = child;
-  } else if (is.arr(type)) {
-    const [attach] = type;
-    if (is.str(attach)) parent[attach](child);else if (is.fun(attach)) attach(parent, child);
-  }
+  } else child.__r3f.previousAttach = type(parent, child);
 }
 function detach(parent, child, type) {
+  var _child$__r3f, _child$__r3f2;
+
   if (is.str(type)) {
     const {
       target,
       key
     } = resolve(parent, type);
-    target[key] = parent.__r3f.previousAttach;
-  } else if (is.arr(type)) {
-    const [, detach] = type;
-    if (is.str(detach)) parent[detach](child);else if (is.fun(detach)) detach(parent, child);
-  }
-} // Shallow check arrays, but check objects atomically
+    target[key] = child.__r3f.previousAttach;
+  } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
 
-function checkShallow(a, b) {
-  if (is.arr(a) && is.equ(a, b)) return true;
-  if (a === b) return true;
-  return false;
+  (_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,
@@ -223,7 +248,7 @@ function diffProps(instance, {
     // Bail out on primitive object
     if ((_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.primitive && key === 'object') return; // When props match bail out
 
-    if (checkShallow(value, previous[key])) return; // Collect handlers and bail out
+    if (is.equ(value, previous[key])) return; // Collect handlers and bail out
 
     if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]); // Split dashed props
 
@@ -277,11 +302,11 @@ function applyProps$1(instance, data) {
     if (value === DEFAULT + 'remove') {
       if (targetProp && targetProp.constructor) {
         // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(memoized.args);
+        value = new targetProp.constructor(...memoized.args);
       } else if (currentInstance.constructor) {
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -309,23 +334,12 @@ function applyProps$1(instance, data) {
 
               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); // Auto-convert sRGB colors, for now ...
-              // https://github.com/pmndrs/react-three-fiber/issues/344
-
-              if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
+                else targetProp.set(value);
             } // Else, just overwrite the value
 
-      } else {
-        currentInstance[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;
-        }
-      }
+      } else currentInstance[key] = value;
 
     invalidateInstance(instance);
-    return instance;
   });
 
   if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
@@ -338,6 +352,7 @@ function applyProps$1(instance, data) {
 
 
   if (changes.length && instance.parent) updateInstance(instance);
+  return instance;
 }
 function invalidateInstance(instance) {
   var _instance$__r3f4, _instance$__r3f4$root;
@@ -401,6 +416,7 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
 
 function removeInteractivity(store, object) {
   const {
+    events,
     internal
   } = store.getState(); // Removes every trace of an object from the data store
 
@@ -408,6 +424,7 @@ function removeInteractivity(store, object) {
   internal.initialHits = internal.initialHits.filter(o => o !== object);
   internal.hovered.forEach((value, key) => {
     if (value.eventObject === object || value.object === object) {
+      // Clear out intersects, they are outdated by now
       internal.hovered.delete(key);
     }
   });
@@ -417,31 +434,8 @@ function removeInteractivity(store, object) {
 }
 function createEvents(store) {
   const temp = new THREE__namespace.Vector3();
-  /** Sets up defaultRaycaster */
-
-  function prepareRay(event) {
-    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
-
-    const state = store.getState();
-    const {
-      raycaster,
-      mouse,
-      camera,
-      size
-    } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
-    // Events trigger outside of canvas when moved
-
-    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
-    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
-    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
-    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
-    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
-    mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
-    raycaster.setFromCamera(mouse, camera);
-  }
   /** Calculates delta */
 
-
   function calculateDistance(event) {
     const {
       internal
@@ -461,55 +455,70 @@ function createEvents(store) {
     }));
   }
 
-  function intersect(filter) {
+  function intersect(event, filter) {
     const state = store.getState();
-    const {
-      raycaster,
-      internal
-    } = state; // Skip event handling when noEvents is set
-
-    if (!raycaster.enabled) return [];
-    const seen = new Set();
+    const duplicates = new Set();
     const intersections = []; // Allow callers to eliminate event objects
 
-    const eventsObjects = filter ? filter(internal.interaction) : internal.interaction; // Intersect known handler objects and filter against duplicates
+    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction; // Reset all raycaster cameras to undefined
+
+    eventsObjects.forEach(obj => {
+      const state = getRootState(obj);
+
+      if (state) {
+        state.raycaster.camera = undefined;
+      }
+    }); // Collect events
+
+    let hits = eventsObjects // Intersect objects
+    .flatMap(obj => {
+      const state = getRootState(obj); // Skip event handling when noEvents is set, or when the raycasters camera is null
+
+      if (!state || !state.events.enabled || state.raycaster.camera === null) return []; // When the camera is undefined we have to call the event layers update function
+
+      if (state.raycaster.camera === undefined) {
+        var _state$previousRoot;
 
-    let intersects = raycaster.intersectObjects(eventsObjects, true).filter(item => {
+        state.events.compute == null ? void 0 : state.events.compute(event, state, (_state$previousRoot = state.previousRoot) == null ? void 0 : _state$previousRoot.getState()); // If the camera is still undefined we have to skip this layer entirely
+
+        if (state.raycaster.camera === undefined) state.raycaster.camera = null;
+      } // Intersect object by object
+
+
+      return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
+    }) // Sort by event priority and distance
+    .sort((a, b) => {
+      const aState = getRootState(a.object);
+      const bState = getRootState(b.object);
+      if (!aState || !bState) return 0;
+      return bState.events.priority - aState.events.priority || a.distance - b.distance;
+    }) // Filter out duplicates
+    .filter(item => {
       const id = makeId(item);
-      if (seen.has(id)) return false;
-      seen.add(id);
+      if (duplicates.has(id)) return false;
+      duplicates.add(id);
       return true;
     }); // https://github.com/mrdoob/three.js/issues/16031
-    // Allow custom userland intersect sort order
+    // Allow custom userland intersect sort order, this likely only makes sense on the root filter
 
-    if (raycaster.filter) intersects = raycaster.filter(intersects, state);
+    if (state.events.filter) hits = state.events.filter(hits, state); // Bubble up the events, find the event source (eventObject)
 
-    for (const intersect of intersects) {
-      let eventObject = intersect.object; // Bubble event up
+    for (const hit of hits) {
+      let eventObject = hit.object; // Bubble event up
 
       while (eventObject) {
         var _r3f2;
 
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...intersect,
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...hit,
           eventObject
         });
         eventObject = eventObject.parent;
       }
-    }
-
-    return intersections;
-  }
-  /**  Creates filtered intersects and returns an array of positive hits */
+    } // If the interaction is captured, make all capturing targets part of the intersect.
 
 
-  function patchIntersects(intersections, event) {
-    const {
-      internal
-    } = store.getState(); // If the interaction is captured, make all capturing targets  part of the
-    // intersect.
-
-    if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-      for (let captureData of internal.capturedMap.get(event.pointerId).values()) {
+    if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
+      for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
         intersections.push(captureData.intersection);
       }
     }
@@ -522,13 +531,13 @@ function createEvents(store) {
   function handleIntersects(intersections, event, delta, callback) {
     const {
       raycaster,
-      mouse,
+      pointer,
       camera,
       internal
     } = store.getState(); // If anything has been found, forward it to the event listeners
 
     if (intersections.length) {
-      const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
+      const unprojectedPoint = temp.set(pointer.x, pointer.y, 0).unproject(camera);
       const localState = {
         stopped: false
       };
@@ -579,8 +588,7 @@ function createEvents(store) {
 
         let raycastEvent = { ...hit,
           ...extractEventProps,
-          spaceX: mouse.x,
-          spaceY: mouse.y,
+          pointer,
           intersections,
           stopped: localState.stopped,
           delta,
@@ -617,8 +625,6 @@ function createEvents(store) {
             setPointerCapture,
             releasePointerCapture
           },
-          sourceEvent: event,
-          // deprecated
           nativeEvent: event
         }; // Call subscribers
 
@@ -683,14 +689,15 @@ function createEvents(store) {
       const {
         onPointerMissed,
         internal
-      } = store.getState();
-      prepareRay(event);
+      } = store.getState(); //prepareRay(event)
+
       internal.lastEvent.current = event; // Get fresh intersects
 
       const isPointerMove = name === 'onPointerMove';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
-      const filter = isPointerMove ? filterPointerEvents : undefined;
-      const hits = patchIntersects(intersect(filter), event);
+      const filter = isPointerMove ? filterPointerEvents : undefined; //const hits = patchIntersects(intersect(filter), event)
+
+      const hits = intersect(event, filter);
       const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
 
       if (name === 'onPointerDown') {
@@ -773,23 +780,6 @@ function createEvents(store) {
   };
 }
 
-// Type guard to tell a store from a portal
-const isStore = def => def && !!def.getState;
-
-const getContainer = (container, child) => {
-  var _container$__r3f$root, _container$__r3f;
-
-  return {
-    // If the container is not a root-store then it must be a THREE.Object3D into which part of the
-    // scene is portalled into. Now there can be two variants of this, either that object is part of
-    // the regular jsx tree, in which case it already has __r3f with a valid root attached, or it lies
-    // outside react, in which case we must take the root of the child that is about to be attached to it.
-    root: isStore(container) ? container : (_container$__r3f$root = (_container$__r3f = container.__r3f) == null ? void 0 : _container$__r3f.root) != null ? _container$__r3f$root : child.__r3f.root,
-    // The container is the eventual target into which objects are mounted, it has to be a THREE.Object3D
-    container: isStore(container) ? container.getState().scene : container
-  };
-};
-
 let catalogue = {};
 
 let extend = objects => void (catalogue = { ...catalogue,
@@ -801,22 +791,9 @@ function createRenderer(roots, getEventPriority) {
     args = [],
     attach,
     ...props
-  }, root, hostContext, internalInstanceHandle) {
+  }, root) {
     let name = `${type[0].toUpperCase()}${type.slice(1)}`;
-    let instance; // https://github.com/facebook/react/issues/17147
-    // Portals do not give us a root, they are themselves treated as a root by the reconciler
-    // In order to figure out the actual root we have to climb through fiber internals :(
-
-    if (!isStore(root) && internalInstanceHandle) {
-      const fn = node => {
-        if (!node.return) return node.stateNode && node.stateNode.containerInfo;else return fn(node.return);
-      };
-
-      root = fn(internalInstanceHandle);
-    } // Assert that by now we have a valid root
-
-
-    if (!root || !isStore(root)) throw `No valid root for ${name}!`; // Auto-attach geometries and materials
+    let instance; // Auto-attach geometries and materials
 
     if (attach === undefined) {
       if (name.endsWith('Geometry')) attach = 'geometry';else if (name.endsWith('Material')) attach = 'material';
@@ -826,6 +803,7 @@ function createRenderer(roots, getEventPriority) {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
       instance = prepare(object, {
+        type,
         root,
         attach,
         primitive: true
@@ -842,19 +820,21 @@ function createRenderer(roots, getEventPriority) {
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
+        type,
         root,
         attach,
         // TODO: Figure out what this is for
         memoizedProps: {
-          args: args.length === 0 ? null : args
+          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
 
 
-    applyProps$1(instance, props);
+    if (name !== 'inject') applyProps$1(instance, props);
     return instance;
   }
 
@@ -976,11 +956,11 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f;
+    var _instance$__r3f, _instance$__r3f2;
 
     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
+    const newInstance = createInstance(type, newProps, (_instance$__r3f2 = instance.__r3f) == null ? void 0 : _instance$__r3f2.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
@@ -1013,19 +993,38 @@ function createRenderer(roots, getEventPriority) {
   }
 
   const reconciler = Reconciler__default['default']({
-    appendChildToContainer: (parentInstance, child) => {
-      const {
-        container,
-        root
-      } = getContainer(parentInstance, child); // Link current root to the default scene
+    createInstance,
+    removeChild,
+    appendChild,
+    appendInitialChild: appendChild,
+    insertBefore,
+    supportsMicrotask: true,
+    warnsIfNotActing: true,
+    supportsMutation: true,
+    isPrimaryRenderer: false,
+    noTimeout: -1,
+    appendChildToContainer: (container, child) => {
+      const scene = container.getState().scene; // Link current root to the default scene
+
+      scene.__r3f.root = container;
+      appendChild(scene, child);
+    },
+    removeChildFromContainer: (container, child) => removeChild(container.getState().scene, child),
+    insertInContainerBefore: (container, child, beforeChild) => insertBefore(container.getState().scene, child, beforeChild),
+    getRootHostContext: () => null,
+    getChildHostContext: parentHostContext => parentHostContext,
 
-      container.__r3f.root = root;
-      appendChild(container, child);
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f3;
+
+      const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // https://github.com/facebook/react/issues/20271
+      // Returning true will trigger commitMount
+
+      return !!localState.handlers;
     },
-    removeChildFromContainer: (parentInstance, child) => removeChild(getContainer(parentInstance, child).container, child),
-    insertInContainerBefore: (parentInstance, child, beforeChild) => insertBefore(getContainer(parentInstance, child).container, child, beforeChild),
 
     prepareUpdate(instance, type, oldProps, newProps) {
+      // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
       } else {
@@ -1058,40 +1057,58 @@ function createRenderer(roots, getEventPriority) {
       else applyProps$1(instance, diff);
     },
 
+    commitMount(instance, type, props, int) {
+      var _instance$__r3f4;
+
+      // https://github.com/facebook/react/issues/20271
+      // This will make sure events are only added once to the central container
+      const localState = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+
+      if (instance.raycast && localState.handlers && localState.eventCount) {
+        instance.__r3f.root.getState().internal.interaction.push(instance);
+      }
+    },
+
+    getPublicInstance: instance => instance,
+    shouldDeprioritizeSubtree: () => false,
+    prepareForCommit: () => null,
+    preparePortalMount: container => prepare(container.getState().scene),
+    resetAfterCommit: () => {},
+    shouldSetTextContent: () => false,
+    clearContainer: () => false,
+    detachDeletedInstance: () => {},
+    createTextInstance: () => {},
+
     hideInstance(instance) {
-      var _instance$__r3f2;
+      var _instance$__r3f5;
 
       // Deatch while the instance is hidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {};
+      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
       if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
-      var _instance$__r3f3;
+      var _instance$__r3f6;
 
       // Re-attach when the instance is unhidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+      } = (_instance$__r3f6 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f6 : {};
       if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
 
-    createInstance,
-    removeChild,
-    appendChild,
-    appendInitialChild: appendChild,
-    insertBefore,
-    warnsIfNotActing: true,
-    supportsMutation: true,
-    isPrimaryRenderer: false,
+    hideTextInstance: () => {
+      throw new Error('Text is not allowed in the R3F tree.');
+    },
+    // prettier-ignore
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
     // @ts-ignore
     now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
@@ -1100,47 +1117,7 @@ function createRenderer(roots, getEventPriority) {
     // @ts-ignore
     cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
     setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    noTimeout: -1,
-    hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    // prettier-ignore
-    getPublicInstance: instance => instance,
-    getRootHostContext: () => null,
-    getChildHostContext: parentHostContext => parentHostContext,
-    createTextInstance: () => {},
-
-    finalizeInitialChildren(instance) {
-      var _instance$__r3f4;
-
-      // https://github.com/facebook/react/issues/20271
-      // Returning true will trigger commitMount
-      const localState = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
-      return !!localState.handlers;
-    },
-
-    commitMount(instance)
-    /*, type, props*/
-    {
-      var _instance$__r3f5;
-
-      // https://github.com/facebook/react/issues/20271
-      // This will make sure events are only added once to the central container
-      const localState = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
-
-      if (instance.raycast && localState.handlers && localState.eventCount) {
-        instance.__r3f.root.getState().internal.interaction.push(instance);
-      }
-    },
-
-    shouldDeprioritizeSubtree: () => false,
-    prepareForCommit: () => null,
-    preparePortalMount: containerInfo => prepare(containerInfo),
-    resetAfterCommit: () => {},
-    shouldSetTextContent: () => false,
-    clearContainer: () => false,
-    detachDeletedInstance: () => {}
+    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,
@@ -1152,63 +1129,8 @@ const isRenderer = def => !!(def != null && def.render);
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
-const createStore = (applyProps, invalidate, advance, props) => {
-  const {
-    gl,
-    size,
-    shadows = false,
-    linear = false,
-    flat = false,
-    orthographic = false,
-    frameloop = 'always',
-    dpr = [1, 2],
-    performance,
-    clock = new THREE__namespace.Clock(),
-    raycaster: raycastOptions,
-    camera: cameraOptions,
-    onPointerMissed
-  } = props; // Set shadowmap
-
-  if (shadows) {
-    gl.shadowMap.enabled = true;
-    if (typeof shadows === 'object') Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
-  } // Set color preferences
-
-
-  if (linear) gl.outputEncoding = THREE__namespace.LinearEncoding;
-  if (flat) gl.toneMapping = THREE__namespace.NoToneMapping; // clock.elapsedTime is updated using advance(timestamp)
-
-  if (frameloop === 'never') {
-    clock.stop();
-    clock.elapsedTime = 0;
-  }
-
+const createStore = (invalidate, advance) => {
   const rootState = create__default['default']((set, get) => {
-    // Create custom raycaster
-    const raycaster = new THREE__namespace.Raycaster();
-    const {
-      params,
-      ...options
-    } = raycastOptions || {};
-    applyProps(raycaster, {
-      enabled: true,
-      ...options,
-      params: { ...raycaster.params,
-        ...params
-      }
-    }); // Create default camera
-
-    const isCamera = cameraOptions instanceof THREE__namespace.Camera;
-    const camera = isCamera ? cameraOptions : orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.PerspectiveCamera(75, 0, 0.1, 1000);
-
-    if (!isCamera) {
-      camera.position.z = 5;
-      if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
-
-      if (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
-    }
-
-    const initialDpr = calculateDpr(dpr);
     const position = new THREE__namespace.Vector3();
     const defaultTarget = new THREE__namespace.Vector3();
     const tempTarget = new THREE__namespace.Vector3();
@@ -1252,61 +1174,38 @@ const createStore = (applyProps, invalidate, advance, props) => {
       performance: { ...state.performance,
         current
       }
-    })); // Handle frame behavior in WebXR
-
-
-    const handleXRFrame = (timestamp, frame) => {
-      const state = get();
-      if (state.frameloop === 'never') return;
-      advance(timestamp, true, state, frame);
-    }; // Toggle render switching on session
-
-
-    const handleSessionChange = () => {
-      gl.xr.enabled = gl.xr.isPresenting; // @ts-expect-error
-      // WebXRManager's signature is incorrect.
-      // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
-
-      gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
-    }; // WebXR session manager
-
-
-    const xr = {
-      connect() {
-        gl.xr.addEventListener('sessionstart', handleSessionChange);
-        gl.xr.addEventListener('sessionend', handleSessionChange);
-      },
-
-      disconnect() {
-        gl.xr.removeEventListener('sessionstart', handleSessionChange);
-        gl.xr.removeEventListener('sessionend', handleSessionChange);
-      }
-
-    }; // Subscribe to WebXR session events
+    }));
 
-    if (gl.xr) xr.connect();
+    const pointer = new THREE__namespace.Vector2();
     return {
-      gl,
       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: () => invalidate(get()),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
-      linear,
-      flat,
+      linear: false,
+      flat: false,
       scene: prepare(new THREE__namespace.Scene()),
-      camera,
       controls: null,
-      raycaster,
-      clock,
-      mouse: new THREE__namespace.Vector2(),
-      frameloop,
-      onPointerMissed,
+      clock: new THREE__namespace.Clock(),
+      pointer,
+      mouse: pointer,
+      frameloop: 'always',
+      onPointerMissed: undefined,
       performance: {
         current: 1,
         min: 0.5,
         max: 1,
         debounce: 200,
-        ...performance,
         regress: () => {
           const state = get(); // Clear timeout
 
@@ -1322,8 +1221,8 @@ const createStore = (applyProps, invalidate, advance, props) => {
         height: 0
       },
       viewport: {
-        initialDpr,
-        dpr: initialDpr,
+        initialDpr: 0,
+        dpr: 0,
         width: 0,
         height: 0,
         aspect: 0,
@@ -1331,7 +1230,13 @@ const createStore = (applyProps, invalidate, advance, props) => {
         factor: 0,
         getCurrentViewport
       },
+      setEvents: events => set(state => ({ ...state,
+        events: { ...state.events,
+          events
+        }
+      })),
       setSize: (width, height) => {
+        const camera = get().camera;
         const size = {
           width,
           height
@@ -1343,22 +1248,35 @@ const createStore = (applyProps, invalidate, advance, props) => {
           }
         }));
       },
-      setDpr: dpr => set(state => ({
-        viewport: { ...state.viewport,
-          dpr: calculateDpr(dpr)
+      setDpr: dpr => set(state => {
+        const resolved = calculateDpr(dpr);
+        return {
+          viewport: { ...state.viewport,
+            dpr: resolved,
+            initialDpr: state.viewport.initialDpr || resolved
+          }
+        };
+      }),
+      setFrameloop: (frameloop = 'always') => {
+        const clock = get().clock; // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+
+        clock.stop();
+        clock.elapsedTime = 0;
+
+        if (frameloop !== 'never') {
+          clock.start();
+          clock.elapsedTime = 0;
         }
-      })),
-      setFrameloop: (frameloop = 'always') => set(() => ({
-        frameloop
-      })),
-      events: {
-        connected: false
+
+        set(() => ({
+          frameloop
+        }));
       },
+      previousRoot: undefined,
       internal: {
         active: false,
         priority: 0,
         frames: 0,
-        lastProps: props,
         lastEvent: /*#__PURE__*/React__namespace.createRef(),
         interaction: [],
         hovered: new Map(),
@@ -1366,7 +1284,6 @@ const createStore = (applyProps, invalidate, advance, props) => {
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: new Map(),
-        xr,
         subscribe: (ref, priority = 0) => {
           set(({
             internal
@@ -1410,13 +1327,13 @@ const createStore = (applyProps, invalidate, advance, props) => {
       camera,
       size,
       viewport,
-      internal
+      gl
     } = rootState.getState();
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
       // https://github.com/pmndrs/react-three-fiber/issues/92
       // Do not mess with the camera if it belongs to the user
-      if (!camera.manual && !(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
+      if (!camera.manual) {
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;
@@ -1438,9 +1355,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
       oldSize = size;
       oldDpr = viewport.dpr;
     }
-  }); // Update size
-
-  if (size) state.setSize(size.width, size.height); // Invalidate on any change
+  }); // Invalidate on any change
 
   rootState.subscribe(state => invalidate(state)); // Return root state
 
@@ -1465,6 +1380,8 @@ function run(effects, timestamp) {
   for (i = 0; i < effects.length; i++) effects[i](timestamp);
 }
 
+let subscribers;
+
 function render$1(timestamp, state, frame) {
   // Run local effects
   let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
@@ -1476,7 +1393,9 @@ function render$1(timestamp, state, frame) {
   } // Call subscribers (useFrame)
 
 
-  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta, frame); // Render content
+  subscribers = state.internal.subscribers;
+
+  for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
 
 
   if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1488,29 +1407,35 @@ function render$1(timestamp, state, frame) {
 function createLoop(roots) {
   let running = false;
   let repeat;
+  let frame;
+  let state;
 
   function loop(timestamp) {
+    frame = requestAnimationFrame(loop);
     running = true;
     repeat = 0; // Run effects
 
-    run(globalEffects, timestamp); // Render all roots
+    if (globalEffects.length) run(globalEffects, timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
 
-      const state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
+      state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
 
       if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
         repeat += render$1(timestamp, state);
       }
     }); // Run after-effects
 
-    run(globalAfterEffects, timestamp); // Keep on looping if anything invalidates the frameloop
+    if (globalAfterEffects.length) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
 
-    if (repeat > 0) return requestAnimationFrame(loop); // Tail call effects, they are called when rendering stops
-    else run(globalTailEffects, timestamp); // Flag end of operation
+    if (repeat === 0) {
+      // Tail call effects, they are called when rendering stops
+      if (globalTailEffects.length) run(globalTailEffects, timestamp); // Flag end of operation
 
-    running = false;
+      running = false;
+      return cancelAnimationFrame(frame);
+    }
   }
 
   function invalidate(state) {
@@ -1574,6 +1499,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React__namespace.useRef(fn);
+  React__namespace.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1603,137 +1533,240 @@ const {
   reconciler,
   applyProps
 } = createRenderer(roots, getEventPriority);
+const shallowLoose = {
+  objects: 'shallow',
+  strict: false
+};
 
 const createRendererInstance = (gl, canvas) => {
   const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
-  if (isRenderer(customRenderer)) return customRenderer;
-  const renderer = new THREE__namespace.WebGLRenderer({
+  if (isRenderer(customRenderer)) return customRenderer;else return new THREE__namespace.WebGLRenderer({
     powerPreference: 'high-performance',
     canvas: canvas,
     antialias: true,
     alpha: true,
     ...gl
-  }); // Set color management
+  });
+};
 
-  renderer.outputEncoding = THREE__namespace.sRGBEncoding;
-  renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping; // Set gl props
+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;
+  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Create store
 
-  if (gl) applyProps(renderer, gl);
-  return renderer;
-};
+  const store = prevStore || createStore(invalidate, advance); // Create renderer
+
+  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, false, null); // Map it
 
-function createRoot(canvas, config) {
+  if (!prevRoot) roots.set(canvas, {
+    fiber,
+    store
+  }); // Locals
+
+  let onCreated;
+  let configured = false;
   return {
-    render: element => {
-      var _store;
+    configure(props = {}) {
+      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
 
       let {
-        gl,
+        gl: glConfig,
         size,
         events,
-        onCreated,
-        ...props
-      } = config || {}; // Allow size to take on container bounds initially
+        onCreated: onCreatedCallback,
+        shadows = false,
+        linear = false,
+        flat = false,
+        orthographic = false,
+        frameloop = 'always',
+        dpr = [1, 2],
+        performance,
+        raycaster: raycastOptions,
+        camera: cameraOptions,
+        onPointerMissed
+      } = props;
+      let state = store.getState(); // Set up renderer (one time only!)
+
+      let gl = state.gl;
+      if (!state.gl) state.set({
+        gl: gl = createRendererInstance(glConfig, canvas)
+      }); // Set up raycaster (one time only!)
+
+      let raycaster = state.raycaster;
+      if (!raycaster) state.set({
+        raycaster: raycaster = new THREE__namespace.Raycaster()
+      }); // Set raycaster options
+
+      const {
+        params,
+        ...options
+      } = raycastOptions || {};
+      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options
+      });
+      if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
+        params: { ...raycaster.params,
+          ...params
+        }
+      }); // Create default camera (one time only!)
 
-      if (!size) {
-        var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
+      if (!state.camera) {
+        const isCamera = cameraOptions instanceof THREE__namespace.Camera;
+        const camera = isCamera ? cameraOptions : orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.PerspectiveCamera(75, 0, 0.1, 1000);
 
-        size = {
-          width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
-          height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
-        };
-      }
+        if (!isCamera) {
+          camera.position.z = 5;
+          if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
+
+          if (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
+        }
 
-      let root = roots.get(canvas);
-      let fiber = root == null ? void 0 : root.fiber;
-      let store = root == null ? void 0 : root.store;
-      let state = (_store = store) == null ? void 0 : _store.getState();
+        state.set({
+          camera
+        });
+      } // Set up XR (one time only!)
 
-      if (fiber && state) {
-        // When a root was found, see if any fundamental props must be changed or exchanged
-        // Check pixelratio
-        if (props.dpr !== undefined && state.viewport.dpr !== calculateDpr(props.dpr)) state.setDpr(props.dpr); // Check size
 
-        if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
+      if (!state.xr) {
+        // Handle frame behavior in WebXR
+        const handleXRFrame = (timestamp, frame) => {
+          const state = store.getState();
+          if (state.frameloop === 'never') return;
+          advance(timestamp, true, state, frame);
+        }; // Toggle render switching on session
 
-        if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // For some props we want to reset the entire root
-        // Changes to the color-space
 
-        const linearChanged = props.linear !== state.internal.lastProps.linear;
+        const handleSessionChange = () => {
+          const gl = store.getState().gl;
+          gl.xr.enabled = gl.xr.isPresenting; // @ts-ignore
+          // WebXRManager's signature is incorrect.
+          // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
 
-        if (linearChanged) {
-          unmountComponentAtNode(canvas);
-          fiber = undefined;
-        }
-      }
+          gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
+        }; // WebXR session manager
 
-      if (!fiber) {
-        // If no root has been found, make one
-        // Create gl
-        const glRenderer = createRendererInstance(gl, canvas); // Create store
 
-        store = createStore(applyProps, invalidate, advance, {
-          gl: glRenderer,
-          size,
-          ...props
-        });
-        const state = store.getState(); // Create renderer
+        const xr = {
+          connect() {
+            const gl = store.getState().gl;
+            gl.xr.addEventListener('sessionstart', handleSessionChange);
+            gl.xr.addEventListener('sessionend', handleSessionChange);
+          },
 
-        fiber = reconciler.createContainer(store, constants.ConcurrentRoot, false, null); // Map it
+          disconnect() {
+            const gl = store.getState().gl;
+            gl.xr.removeEventListener('sessionstart', handleSessionChange);
+            gl.xr.removeEventListener('sessionend', handleSessionChange);
+          }
 
-        roots.set(canvas, {
-          fiber,
-          store
-        }); // Store events internally
+        }; // Subscribe to WebXR session events
 
-        if (events) state.set({
-          events: events(store)
+        if (gl.xr) xr.connect();
+        state.set({
+          xr
         });
-      }
+      } // Set shadowmap
 
-      if (store && fiber) {
-        reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
-          store: store,
-          element: element,
-          onCreated: onCreated,
-          target: canvas
-        }), fiber, null, () => undefined);
-        return store;
-      } else {
-        throw 'Error creating root!';
-      }
+
+      if (gl.shadowMap) {
+        const isBoolean = is.boo(shadows);
+
+        if (isBoolean && gl.shadowMap.enabled !== shadows || !is.equ(shadows, gl.shadowMap, shallowLoose)) {
+          const old = gl.shadowMap.enabled;
+          gl.shadowMap.enabled = !!shadows;
+          if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
+          if (old !== gl.shadowMap.enabled) gl.shadowMap.needsUpdate = true;
+        }
+      } // Set color management
+
+
+      if (THREE__namespace.ColorManagement) THREE__namespace.ColorManagement.legacyMode = false;
+      const outputEncoding = linear ? THREE__namespace.LinearEncoding : THREE__namespace.sRGBEncoding;
+      const toneMapping = flat ? THREE__namespace.NoToneMapping : THREE__namespace.ACESFilmicToneMapping;
+      if (gl.outputEncoding !== outputEncoding) gl.outputEncoding = outputEncoding;
+      if (gl.toneMapping !== toneMapping) gl.toneMapping = toneMapping; // Set gl props
+
+      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig); // Store events internally
+
+      if (events && !state.events.handlers) state.set({
+        events: events(store)
+      }); // Check pixelratio
+
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
+
+      size = size || {
+        width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
+        height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
+      };
+      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height); // Check frameloop
+
+      if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
+
+      if (!state.onPointerMissed) state.set({
+        onPointerMissed
+      }); // Check performance
+
+      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
+        performance: { ...state.performance,
+          ...performance
+        }
+      })); // Set locals
+
+      onCreated = onCreatedCallback;
+      configured = true;
+      return this;
     },
-    unmount: () => unmountComponentAtNode(canvas)
+
+    render(children) {
+      // The root has to be configured before it can be rendered
+      if (!configured) this.configure();
+      reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
+        store: store,
+        children: children,
+        onCreated: onCreated,
+        rootElement: canvas
+      }), fiber, null, () => undefined);
+      return store;
+    },
+
+    unmount() {
+      unmountComponentAtNode(canvas);
+    }
+
   };
 }
 
-function render(element, canvas, config = {}) {
+function render(children, canvas, config) {
   console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
-  return createRoot(canvas, config).render(element);
+  const root = createRoot(canvas);
+  root.configure(config);
+  return root.render(children);
 }
 
 function Provider({
   store,
-  element,
+  children,
   onCreated,
-  target
+  rootElement
 }) {
-  React__namespace.useEffect(() => {
+  React__namespace.useLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
       internal: { ...state.internal,
         active: true
       }
-    })); // Connect events
+    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
 
-    state.events.connect == null ? void 0 : state.events.connect(target); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+    if (onCreated) onCreated(state); // Connect events to the targets parent, this is done to ensure events are registered on
+    // a shared target, and not on the canvas itself
 
-    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React__namespace.createElement(context.Provider, {
     value: store
-  }, element);
+  }, children);
 }
 
 function unmountComponentAtNode(canvas, callback) {
@@ -1752,7 +1785,7 @@ function unmountComponentAtNode(canvas, callback) {
             state.events.disconnect == null ? void 0 : state.events.disconnect();
             (_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.internal.xr.disconnect();
+            if ((_state$gl3 = state.gl) != null && _state$gl3.xr) state.xr.disconnect();
             dispose(state);
             roots.delete(canvas);
             if (callback) callback(canvas);
@@ -1765,10 +1798,67 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 
-const act = React__namespace.unstable_act;
+function createPortal(children, container, state) {
+  return /*#__PURE__*/React__namespace.createElement(Portal, {
+    children: children,
+    container: container,
+    state: state
+  });
+}
+
+function Portal({
+  state = {},
+  children,
+  container
+}) {
+  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
+   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
+   *  the "R3F hooks can only be used within the Canvas component!" warning:
+   *  <Canvas>
+   *    {createPortal(...)} */
+  const {
+    events,
+    ...rest
+  } = state;
+  const previousRoot = useStore();
+  const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
+  const inject = React__namespace.useCallback((state, injectState) => {
+    const intersect = { ...state
+    };
+
+    if (injectState) {
+      // Only the fields of "state" that do not differ from injectState
+      Object.keys(state).forEach(key => {
+        if ( // Some props should be off-limits
+        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
+        state[key] !== injectState[key]) delete intersect[key];
+      });
+    }
 
-function createPortal(children, container) {
-  return reconciler.createPortal(children, container, null, null);
+    return { ...intersect,
+      scene: container,
+      previousRoot,
+      raycaster,
+      events: { ...state.events,
+        ...events
+      },
+      ...rest
+    };
+  }, [state]);
+  const [useInjectStore] = React__namespace.useState(() => {
+    const store = create__default['default']((set, get) => ({ ...inject(previousRoot.getState()),
+      set,
+      get
+    }));
+    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
+    return store;
+  });
+  React__namespace.useEffect(() => {
+    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+  }, [inject]);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
+    value: useInjectStore
+  }, children), useInjectStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -1776,6 +1866,7 @@ reconciler.injectIntoDevTools({
   rendererPackageName: '@react-three/fiber',
   version: '18.0.0'
 });
+const act = React__namespace.unstable_act;
 
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
@@ -1789,6 +1880,7 @@ exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
+exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.omit = omit;
 exports.pick = pick;
@@ -1800,5 +1892,6 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;
+exports.useMemoizedFn = useMemoizedFn;
 exports.useStore = useStore;
 exports.useThree = useThree;