@react-three/fiber 8.0.0-alpha-05 → 8.0.0-alpha-09

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

@@ -1,10 +1,9 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { DefaultEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
+import { DefaultEventPriority, IdleEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import create from 'zustand';
 import shallow from 'zustand/shallow';
 import Reconciler from 'react-reconciler';
-import { unstable_now, unstable_runWithPriority, unstable_IdlePriority } from 'scheduler';
 import { useAsset } from 'use-asset';
 import mergeRefs from 'react-merge-refs';
 import useMeasure from 'react-use-measure';
@@ -13,6 +12,9 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+const DEFAULT = '__default';
+const isDiffSet = def => def && !!def.memoized && !!def.changes;
+// A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
   fun: a => typeof a === 'function',
@@ -38,10 +40,181 @@ const is = {
     return is.und(i) ? a === b : true;
   }
 
-};
+}; // Each object in the scene carries a small LocalState descriptor
+
+function prepare(object, state) {
+  const instance = object;
+
+  if (state != null && state.primitive || !instance.__r3f) {
+    instance.__r3f = {
+      root: null,
+      memoizedProps: {},
+      handlers: {
+        count: 0
+      },
+      objects: [],
+      ...state
+    };
+  }
+
+  return object;
+} // Shallow check arrays, but check objects atomically
+
+function checkShallow(a, b) {
+  if (is.arr(a) && is.equ(a, b)) return true;
+  if (a === b) return true;
+  return false;
+} // 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']);
+  }
+
+  entries.forEach(([key, value]) => {
+    var _instance$__r3f2;
+
+    // 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;
+    let currentInstance = instance;
+    let targetProp = currentInstance[key]; // Collect handlers and bail out
+
+    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, currentInstance, targetProp]); // Revolve dashed props
+
+    if (key.includes('-')) {
+      const entries = key.split('-');
+      targetProp = entries.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] = entries.reverse();
+        currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
+        key = name;
+      }
+    }
+
+    changes.push([key, value, false, currentInstance, targetProp]);
+  });
+  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, _localState$handlers, _localState$handlers2;
+
+  // Filter equals, events and reserved props
+  const localState = (_instance$__r3f3 = instance == null ? void 0 : 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$handlers = localState.handlers) == null ? void 0 : _localState$handlers.count; // Prepare memoized props
+
+  if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
+  changes.forEach(([key, value, isEvent, currentInstance, targetProp]) => {
+    // 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
+    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);
+      } 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);
+        value = defaultClassCall[targetProp]; // destory the instance
+
+        if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
+      } else value = 0;
+    } // Deal with pointer events ...
+
+
+    if (isEvent) {
+      if (value) localState.handlers[key] = value;else delete localState.handlers[key];
+      localState.handlers.count = 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.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/react-spring/react-three-fiber/issues/274
+          else if (value !== undefined) {
+              const isColor = targetProp instanceof THREE.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.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+                else targetProp.set(value); // Auto-convert sRGB colors, for now ...
+              // https://github.com/react-spring/react-three-fiber/issues/344
+
+              if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
+            } // Else, just overwrite the value
+
+      } else {
+        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+        // https://github.com/react-spring/react-three-fiber/issues/344
+
+        if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) currentInstance[key].encoding = THREE.sRGBEncoding;
+      }
+
+    invalidateInstance(instance);
+  });
+
+  if (rootState.internal && instance.raycast && prevHandlers !== ((_localState$handlers2 = localState.handlers) == null ? void 0 : _localState$handlers2.count)) {
+    // Pre-emptively remove the instance from the interaction manager
+    const index = rootState.internal.interaction.indexOf(instance);
+    if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
+
+    if (localState.handlers.count) rootState.internal.interaction.push(instance);
+  } // Call the update lifecycle when it is being updated, but only when it is part of the scene
+
+
+  if (changes.length && instance.parent) updateInstance(instance);
+}
+function invalidateInstance(instance) {
+  var _instance$__r3f4, _instance$__r3f4$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();
+  if (state && state.internal.frames === 0) state.invalidate();
+}
+function updateInstance(instance) {
+  instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
+}
 
 function makeId(event) {
-  return (event.eventObject || event.object).uuid + '/' + event.index;
+  return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
 
 function removeInteractivity(store, object) {
@@ -99,11 +272,7 @@ function createEvents(store) {
 
 
   function filterPointerEvents(objects) {
-    return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => {
-      var _r3f$handlers;
-
-      return (_r3f$handlers = obj.__r3f.handlers) == null ? void 0 : _r3f$handlers['onPointer' + name];
-    }));
+    return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => obj.__r3f.handlers['onPointer' + name]));
   }
 
   function intersect(filter) {
@@ -133,10 +302,7 @@ function createEvents(store) {
       let eventObject = intersect.object; // Bubble event up
 
       while (eventObject) {
-        var _r3f;
-
-        const handlers = (_r3f = eventObject.__r3f) == null ? void 0 : _r3f.handlers;
-        if (handlers) intersections.push({ ...intersect,
+        if (eventObject.__r3f.handlers.count) intersections.push({ ...intersect,
           eventObject
         });
         eventObject = eventObject.parent;
@@ -273,12 +439,12 @@ function createEvents(store) {
     Array.from(internal.hovered.values()).forEach(hoveredObj => {
       // When no objects were hit or the the hovered object wasn't found underneath the cursor
       // we call onPointerOut and delete the object from the hovered-elements map
-      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index)) {
+      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
         const eventObject = hoveredObj.eventObject;
         const handlers = eventObject.__r3f.handlers;
         internal.hovered.delete(makeId(hoveredObj));
 
-        if (handlers) {
+        if (handlers.count) {
           // Clear out intersects, they are outdated by now
           const data = { ...hoveredObj,
             intersections: hits || []
@@ -327,7 +493,7 @@ function createEvents(store) {
         const eventObject = data.eventObject;
         const handlers = eventObject.__r3f.handlers; // Check presence of handlers
 
-        if (!handlers) return;
+        if (!handlers.count) return;
 
         if (isPointerMove) {
           // Move event ...
@@ -351,14 +517,14 @@ function createEvents(store) {
           handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
         } else {
           // All other events ...
-          const handler = handlers == null ? void 0 : handlers[name];
+          const handler = handlers[name];
 
           if (handler) {
             // Forward all events back to their respective handlers with the exception of click events,
             // which must use the initial target
             if (name !== 'onClick' && name !== 'onContextMenu' && name !== 'onDoubleClick' || internal.initialHits.includes(eventObject)) {
               handler(data);
-              pointerMissed(event, internal.interaction.filter(object => object !== eventObject));
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
             }
           }
         }
@@ -381,9 +547,9 @@ function createEvents(store) {
 
   function pointerMissed(event, objects) {
     objects.forEach(object => {
-      var _r3f$handlers2;
+      var _r3f$handlers$onPoin, _r3f$handlers;
 
-      return (_r3f$handlers2 = object.__r3f.handlers) == null ? void 0 : _r3f$handlers2.onPointerMissed == null ? void 0 : _r3f$handlers2.onPointerMissed(event);
+      return (_r3f$handlers$onPoin = (_r3f$handlers = object.__r3f.handlers).onPointerMissed) == null ? void 0 : _r3f$handlers$onPoin.call(_r3f$handlers, event);
     });
   }
 
@@ -409,226 +575,13 @@ const getContainer = (container, child) => {
   };
 };
 
-const DEFAULT = '__default';
-const EMPTY = {};
-const FILTER = ['children', 'key', 'ref'];
 let catalogue = {};
 
 let extend = objects => void (catalogue = { ...catalogue,
   ...objects
-}); // Each object in the scene carries a small LocalState descriptor
-
-
-function prepare(object, state) {
-  const instance = object;
-
-  if (state != null && state.instance || !instance.__r3f) {
-    instance.__r3f = {
-      root: null,
-      memoizedProps: {},
-      objects: [],
-      ...state
-    };
-  }
-
-  return object;
-}
-
-function createRenderer(roots) {
-  function applyProps(instance, newProps, oldProps = {}, accumulative = false) {
-    var _instance$__r3f, _root$getState, _instance$__r3f2;
-
-    // Filter equals, events and reserved props
-    const localState = (_instance$__r3f = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f : {};
-    const root = localState.root;
-    const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
-    const sameProps = [];
-    const handlers = [];
-    const newMemoizedProps = {};
-    let i = 0;
-    Object.entries(newProps).forEach(([key, entry]) => {
-      // we don't want children, ref or key in the memoized props
-      if (FILTER.indexOf(key) === -1) {
-        newMemoizedProps[key] = entry;
-      }
-    });
-
-    if (localState.memoizedProps && localState.memoizedProps.args) {
-      newMemoizedProps.args = localState.memoizedProps.args;
-    }
-
-    if (localState.memoizedProps && localState.memoizedProps.attach) {
-      newMemoizedProps.attach = localState.memoizedProps.attach;
-    }
-
-    if (instance.__r3f) {
-      instance.__r3f.memoizedProps = newMemoizedProps;
-    }
-
-    let objectKeys = Object.keys(newProps);
-
-    for (i = 0; i < objectKeys.length; i++) {
-      if (is.equ(newProps[objectKeys[i]], oldProps[objectKeys[i]])) {
-        sameProps.push(objectKeys[i]);
-      } // Event-handlers ...
-      //   are functions, that
-      //   start with "on", and
-      //   contain the name "Pointer", "Click", "DoubleClick", "ContextMenu", or "Wheel"
-
-
-      if (is.fun(newProps[objectKeys[i]]) && /^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(objectKeys[i])) {
-        handlers.push(objectKeys[i]);
-      }
-    } // Catch props that existed, but now exist no more ...
-
-
-    const leftOvers = [];
-
-    if (accumulative) {
-      objectKeys = Object.keys(oldProps);
-
-      for (i = 0; i < objectKeys.length; i++) {
-        if (!newProps.hasOwnProperty(objectKeys[i])) {
-          leftOvers.push(objectKeys[i]);
-        }
-      }
-    }
-
-    const toFilter = [...sameProps, ...FILTER]; // Instances use "object" as a reserved identifier
-
-    if ((_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.instance) toFilter.push('object');
-    const filteredProps = { ...newProps
-    }; // Removes sameProps and reserved props from newProps
-
-    objectKeys = Object.keys(filteredProps);
-
-    for (i = 0; i < objectKeys.length; i++) {
-      if (toFilter.indexOf(objectKeys[i]) > -1) {
-        delete filteredProps[objectKeys[i]];
-      }
-    } // Collect all new props
-
-
-    const filteredPropsEntries = Object.entries(filteredProps); // Prepend left-overs so they can be reset or removed
-    // Left-overs must come first!
-
-    for (i = 0; i < leftOvers.length; i++) {
-      if (leftOvers[i] !== 'children') {
-        filteredPropsEntries.unshift([leftOvers[i], DEFAULT + 'remove']);
-      }
-    }
-
-    if (filteredPropsEntries.length > 0) {
-      filteredPropsEntries.forEach(([key, value]) => {
-        if (!handlers.includes(key)) {
-          let currentInstance = instance;
-          let targetProp = currentInstance[key];
-
-          if (key.includes('-')) {
-            const entries = key.split('-');
-            targetProp = entries.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] = entries.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
-
-
-          if (value === DEFAULT + 'remove') {
-            if (targetProp && targetProp.constructor) {
-              // use the prop constructor to find the default it should be
-              value = new targetProp.constructor(newMemoizedProps.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);
-              value = defaultClassCall[targetProp]; // destory the instance
-
-              if (defaultClassCall.dispose) {
-                defaultClassCall.dispose();
-              }
-            } else {
-              // instance does not have constructor, just set it to 0
-              value = 0;
-            }
-          } // Special treatment for objects with support for set/copy, and layers
-
-
-          if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE.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/react-spring/react-three-fiber/issues/274
-              else if (value !== undefined) {
-                  const isColor = targetProp instanceof THREE.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.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                    else targetProp.set(value); // Auto-convert sRGB colors, for now ...
-                  // https://github.com/react-spring/react-three-fiber/issues/344
-
-                  if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
-                } // Else, just overwrite the value
-
-          } else {
-            currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
-            // https://github.com/react-spring/react-three-fiber/issues/344
-
-            if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) currentInstance[key].encoding = THREE.sRGBEncoding;
-          }
-
-          invalidateInstance(instance);
-        }
-      }); // Preemptively delete the instance from the containers interaction
-
-      if (accumulative && root && instance.raycast && localState.handlers) {
-        localState.handlers = undefined;
-        const index = rootState.internal.interaction.indexOf(instance);
-        if (index > -1) rootState.internal.interaction.splice(index, 1);
-      } // Prep interaction handlers
-
-
-      if (handlers.length) {
-        if (accumulative && root && instance.raycast) {
-          rootState.internal.interaction.push(instance);
-        } // Add handlers to the instances handler-map
-
-
-        localState.handlers = handlers.reduce((acc, key) => ({ ...acc,
-          [key]: newProps[key]
-        }), {});
-      } // Call the update lifecycle when it is being updated, but only when it is part of the scene
-
-
-      if (instance.parent) updateInstance(instance);
-    }
-  }
-
-  function invalidateInstance(instance) {
-    var _instance$__r3f3, _instance$__r3f3$root;
-
-    const state = (_instance$__r3f3 = instance.__r3f) == null ? void 0 : (_instance$__r3f3$root = _instance$__r3f3.root) == null ? void 0 : _instance$__r3f3$root.getState == null ? void 0 : _instance$__r3f3$root.getState();
-    if (state && state.internal.frames === 0) state.invalidate();
-  }
-
-  function updateInstance(instance) {
-    instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
-  }
+});
 
+function createRenderer(roots, getEventPriority) {
   function createInstance(type, {
     args = [],
     ...props
@@ -654,7 +607,7 @@ function createRenderer(roots) {
       const object = props.object;
       instance = prepare(object, {
         root,
-        instance: true
+        primitive: true
       });
     } else {
       const target = catalogue[name] || THREE[name];
@@ -688,7 +641,7 @@ function createRenderer(roots) {
     // why it passes "true" here
 
 
-    applyProps(instance, props, {});
+    applyProps$1(instance, props);
     return instance;
   }
 
@@ -811,18 +764,18 @@ function createRenderer(roots) {
       // 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 an <instance object={...} />
+      //   - 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
 
 
-      const isInstance = (_child$__r3f2 = child.__r3f) == null ? void 0 : _child$__r3f2.instance;
-      const shouldDispose = dispose === undefined ? child.dispose !== null && !isInstance : dispose; // Remove nested child objects. Primitives should not have objects and children that are
+      const isPrimitive = (_child$__r3f2 = child.__r3f) == null ? void 0 : _child$__r3f2.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 (!isInstance) {
+      if (!isPrimitive) {
         var _child$__r3f3;
 
         removeRecursive((_child$__r3f3 = child.__r3f) == null ? void 0 : _child$__r3f3.objects, child, shouldDispose);
@@ -835,12 +788,18 @@ function createRenderer(roots) {
         delete child.__r3f.objects;
         delete child.__r3f.handlers;
         delete child.__r3f.memoizedProps;
-        if (!isInstance) delete child.__r3f;
+        if (!isPrimitive) delete child.__r3f;
       } // Dispose item whenever the reconciler feels like it
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        unstable_runWithPriority(unstable_IdlePriority, () => child.dispose());
+        reconciler.runWithPriority(IdleEventPriority, () => {
+          try {
+            child.dispose();
+          } catch (e) {
+            /* ... */
+          }
+        });
       }
 
       invalidateInstance(parentInstance);
@@ -879,25 +838,6 @@ function createRenderer(roots) {
   }
 
   const reconciler = Reconciler({
-    now: unstable_now,
-    createInstance,
-    removeChild,
-    appendChild,
-    appendInitialChild: appendChild,
-    insertBefore,
-    warnsIfNotActing: true,
-    supportsMutation: true,
-    isPrimaryRenderer: false,
-    getCurrentEventPriority: () => DefaultEventPriority,
-    // @ts-ignore
-    scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    // @ts-ignore
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    noTimeout: -1,
     appendChildToContainer: (parentInstance, child) => {
       const {
         container,
@@ -907,46 +847,38 @@ function createRenderer(roots) {
       container.__r3f.root = root;
       appendChild(container, child);
     },
-    removeChildFromContainer: (parentInstance, child) => {
-      const {
-        container
-      } = getContainer(parentInstance, child);
-      removeChild(container, child);
-    },
-    insertInContainerBefore: (parentInstance, child, beforeChild) => {
-      const {
-        container
-      } = getContainer(parentInstance, child);
-      insertBefore(container, child, beforeChild);
-    },
+    removeChildFromContainer: (parentInstance, child) => removeChild(getContainer(parentInstance, child).container, child),
+    insertInContainerBefore: (parentInstance, child, beforeChild) => insertBefore(getContainer(parentInstance, child).container, child, beforeChild),
 
-    commitUpdate(instance, updatePayload, type, oldProps, newProps, fiber) {
-      if (instance.__r3f.instance && newProps.object && newProps.object !== instance) {
-        // <instance object={...} /> where the object reference has changed
-        switchInstance(instance, type, newProps, fiber);
-      } else {
+    prepareUpdate(instance, type, oldProps, newProps) {
+      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; // If it has new props or arguments, then it needs to be re-instanciated
 
-        const hasNewArgs = argsNew.some((value, index) => is.obj(value) ? Object.entries(value).some(([key, val]) => val !== argsOld[index][key]) : value !== argsOld[index]);
+        if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
-        if (hasNewArgs) {
-          // Next we create a new instance and append it again
-          switchInstance(instance, type, newProps, fiber);
-        } else {
-          // Otherwise just overwrite props
-          applyProps(instance, restNew, restOld, true);
-        }
+        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);
+    },
+
     hideInstance(instance) {
       if (instance.isObject3D) {
         instance.visible = false;
@@ -961,72 +893,45 @@ function createRenderer(roots) {
       }
     },
 
-    hideTextInstance() {
+    createInstance,
+    removeChild,
+    appendChild,
+    appendInitialChild: appendChild,
+    insertBefore,
+    warnsIfNotActing: true,
+    supportsMutation: true,
+    isPrimaryRenderer: false,
+    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : DefaultEventPriority,
+    // @ts-ignore
+    now: is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    // @ts-ignore
+    scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
+    // @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.');
     },
-
-    getPublicInstance(instance) {
-      // TODO: might fix switchInstance (?)
-      return instance;
-    },
-
-    getRootHostContext(rootContainer) {
-      return EMPTY;
-    },
-
-    getChildHostContext(parentHostContext) {
-      return EMPTY;
-    },
-
-    createTextInstance() {},
-
-    finalizeInitialChildren(instance) {
-      // https://github.com/facebook/react/issues/20271
-      // Returning true will trigger commitMount
-      return !!instance.__r3f.handlers;
-    },
-
-    commitMount(instance)
-    /*, type, props*/
-    {
-      // https://github.com/facebook/react/issues/20271
-      // This will make sure events are only added once to the central container
-      if (instance.raycast && instance.__r3f.handlers) instance.__r3f.root.getState().internal.interaction.push(instance);
-    },
-
-    prepareUpdate() {
-      return EMPTY;
-    },
-
-    shouldDeprioritizeSubtree() {
-      return false;
-    },
-
-    prepareForCommit() {
-      return null;
-    },
-
-    preparePortalMount(...args) {// noop
-    },
-
-    resetAfterCommit() {// noop
-    },
-
-    shouldSetTextContent() {
-      return false;
-    },
-
-    clearContainer() {
-      return false;
-    },
-
-    detachDeletedInstance() {// noop
-    }
-
+    // prettier-ignore
+    getPublicInstance: instance => instance,
+    getRootHostContext: () => null,
+    getChildHostContext: parentHostContext => parentHostContext,
+    createTextInstance: () => {},
+    finalizeInitialChildren: () => false,
+    commitMount: () => {},
+    shouldDeprioritizeSubtree: () => false,
+    prepareForCommit: () => null,
+    preparePortalMount: containerInfo => prepare(containerInfo),
+    resetAfterCommit: () => {},
+    shouldSetTextContent: () => false,
+    clearContainer: () => false,
+    detachDeletedInstance: () => {}
   });
   return {
     reconciler,
-    applyProps
+    applyProps: applyProps$1
   };
 }
 
@@ -1079,14 +984,14 @@ const createStore = (applyProps, invalidate, advance, props) => {
       params: { ...raycaster.params,
         ...params
       }
-    }, {}); // Create default camera
+    }); // Create default camera
 
     const isCamera = cameraOptions instanceof THREE.Camera;
     const camera = isCamera ? cameraOptions : orthographic ? new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE.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) applyProps(camera, cameraOptions); // Always look at center by default
 
       camera.lookAt(0, 0, 0);
     }
@@ -1224,8 +1129,8 @@ const createStore = (applyProps, invalidate, advance, props) => {
             internal: { ...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 could be multiple render subscription)
-              // ..there can be no internal rendering at all
+              // As long as this flag is positive there can be no internal rendering at all
+              // because there could be multiple render subscriptions
               priority: internal.priority + (priority > 0 ? 1 : 0),
               // Register subscriber and sort layers from lowest to highest, meaning,
               // highest priority renders last (on top of the other frames)
@@ -1377,20 +1282,61 @@ function createLoop(roots) {
   };
 }
 
+// @ts-ignore
+const CLICK = 'click';
+const CONTEXTMENU = 'contextmenu';
+const DBLCLICK = 'dblclick';
+const POINTERCANCEL = 'pointercancel';
+const POINTERDOWN = 'pointerdown';
+const POINTERUP = 'pointerup';
+const POINTERMOVE = 'pointermove';
+const POINTEROUT = 'pointerout';
+const POINTEROVER = 'pointerover';
+const POINTERENTER = 'pointerenter';
+const POINTERLEAVE = 'pointerleave';
+const WHEEL = 'wheel'; // https://github.com/facebook/react/tree/main/packages/react-reconciler#getcurrenteventpriority
+// Gives React a clue as to how import the current interaction is
+
+function getEventPriority() {
+  var _window, _window$event;
+
+  let name = (_window = window) == null ? void 0 : (_window$event = _window.event) == null ? void 0 : _window$event.type;
+
+  switch (name) {
+    case CLICK:
+    case CONTEXTMENU:
+    case DBLCLICK:
+    case POINTERCANCEL:
+    case POINTERDOWN:
+    case POINTERUP:
+      return DiscreteEventPriority;
+
+    case POINTERMOVE:
+    case POINTEROUT:
+    case POINTEROVER:
+    case POINTERENTER:
+    case POINTERLEAVE:
+    case WHEEL:
+      return ContinuousEventPriority;
+
+    default:
+      return DefaultEventPriority;
+  }
+}
 function createPointerEvents(store) {
   const {
     handlePointer
   } = createEvents(store);
   const names = {
-    onClick: ['click', false],
-    onContextMenu: ['contextmenu', false],
-    onDoubleClick: ['dblclick', false],
-    onWheel: ['wheel', true],
-    onPointerDown: ['pointerdown', true],
-    onPointerUp: ['pointerup', true],
-    onPointerLeave: ['pointerleave', true],
-    onPointerMove: ['pointermove', true],
-    onPointerCancel: ['pointercancel', true],
+    onClick: [CLICK, false],
+    onContextMenu: [CONTEXTMENU, false],
+    onDoubleClick: [DBLCLICK, false],
+    onWheel: [WHEEL, true],
+    onPointerDown: [POINTERDOWN, true],
+    onPointerUp: [POINTERUP, true],
+    onPointerLeave: [POINTERLEAVE, true],
+    onPointerMove: [POINTERMOVE, true],
+    onPointerCancel: [POINTERCANCEL, true],
     onLostPointerCapture: ['lostpointercapture', true]
   };
   return {
@@ -1554,17 +1500,12 @@ function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
 function useFrame(callback, renderPriority = 0) {
-  const {
-    subscribe
-  } = useStore().getState().internal; // Update ref
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
 
   const ref = React.useRef(callback);
-  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe/unsub
+  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React.useLayoutEffect(() => {
-    const unsubscribe = subscribe(ref, renderPriority);
-    return () => unsubscribe();
-  }, [renderPriority, subscribe]);
+  React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
   return null;
 }
 
@@ -1632,7 +1573,7 @@ const {
 const {
   reconciler,
   applyProps
-} = createRenderer();
+} = createRenderer(roots, getEventPriority);
 
 const createRendererInstance = (gl, canvas) => isRenderer(gl) ? gl : new THREE.WebGLRenderer({
   powerPreference: 'high-performance',
@@ -1785,17 +1726,9 @@ function dispose(obj) {
 }
 
 const act = reconciler.act;
-const hasSymbol = is.fun(Symbol) && Symbol.for;
-const REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
 
-function createPortal(children, container, implementation, key = null) {
-  return {
-    $$typeof: REACT_PORTAL_TYPE,
-    key: key == null ? null : '' + key,
-    children,
-    containerInfo: prepare(container),
-    implementation
-  };
+function createPortal(children, container) {
+  return reconciler.createPortal(children, container, null, null);
 }
 
 reconciler.injectIntoDevTools({