@react-three/fiber 7.0.3 → 7.0.7

package/CHANGELOG.md

@@ -1,9 +1,34 @@
 # @react-three/fiber
 
+## 7.0.7
+
+### Patch Changes
+
+- 0375896: Simplify useframe, support instanced event cancelation, silence disposal
+
+## 7.0.6
+
+### Patch Changes
+
+- fb052ad: Fix babel-env browserslist transpiling into old code"
+
+## 7.0.5
+
+### Patch Changes
+
+- c97794a: Add useLoader.clear(Loader, input)
+
+## 7.0.4
+
+### Patch Changes
+
+- 974ecfb: Allow elements to define attachFns for specific mount/unmount
+
 ## 7.0.2
 
 ### Patch Changes
 
+- a97aca3: Add controls state field
 - 4c703d6: fix rttr didn't work with r130
 
 ## 7.0.0

package/dist/declarations/src/core/hooks.d.ts

@@ -17,11 +17,13 @@ export declare type ObjectMap = {
         [name: string]: THREE.Material;
     };
 };
+export declare function useStore(): import("zustand").UseStore<RootState>;
 export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
 export declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
 export declare namespace useLoader {
     var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
+    var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;
 }
 export {};

package/dist/declarations/src/core/is.d.ts

@@ -1,8 +1,8 @@
 export declare const is: {
     obj: (a: any) => boolean;
-    fun: (a: any) => boolean;
-    str: (a: any) => boolean;
-    num: (a: any) => boolean;
+    fun: (a: any) => a is Function;
+    str: (a: any) => a is string;
+    num: (a: any) => a is number;
     und: (a: any) => boolean;
     arr: (a: any) => boolean;
     equ(a: any, b: any): boolean;

package/dist/declarations/src/core/renderer.d.ts

@@ -19,11 +19,14 @@ export declare type LocalState = {
 export declare type ClassConstructor = {
     new (): void;
 };
+export declare type AttachFnType = (self: Instance, parent: Instance) => void;
+export declare type AttachFnsType = [attach: string | AttachFnType, detach: string | AttachFnType];
 export declare type BaseInstance = Omit<THREE.Object3D, 'parent' | 'children' | 'attach' | 'add' | 'remove' | 'raycast'> & {
     __r3f: LocalState;
     parent: Instance | null;
     children: Instance[];
     attach?: string;
+    attachFns?: AttachFnsType;
     remove: (...object: Instance[]) => Instance;
     add: (...object: Instance[]) => Instance;
     raycast?: (raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) => void;

package/dist/declarations/src/core/store.d.ts

@@ -56,6 +56,7 @@ export declare type RootState = {
     gl: THREE.WebGLRenderer;
     scene: THREE.Scene;
     camera: Camera;
+    controls: THREE.EventDispatcher | null;
     raycaster: Raycaster;
     mouse: THREE.Vector2;
     clock: THREE.Clock;

package/dist/declarations/src/three-types.d.ts

@@ -14,10 +14,12 @@ export declare type Color = ConstructorParameters<typeof THREE.Color> | THREE.Co
 export declare type ColorArray = typeof THREE.Color | Parameters<THREE.Color['set']>;
 export declare type Layers = THREE.Layers | Parameters<THREE.Layers['set']>[0];
 export declare type Quaternion = THREE.Quaternion | Parameters<THREE.Quaternion['set']>;
+export declare type AttachCallback = string | ((child: any, parentInstance: any) => void);
 export interface NodeProps<T, P> {
     attach?: string;
     attachArray?: string;
     attachObject?: [target: string, name: string];
+    attachFns?: [AttachCallback, AttachCallback];
     args?: Args<P>;
     children?: React.ReactNode;
     ref?: React.Ref<React.ReactNode>;

package/dist/declarations/src/web/index.d.ts

@@ -13,7 +13,7 @@ declare const modes: readonly ["legacy", "blocking", "concurrent"];
 declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
 declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: (instance: import("../core/renderer").Instance, newProps: import("../core/renderer").InstanceProps, oldProps?: import("../core/renderer").InstanceProps, accumulative?: boolean) => void;
 export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
-    gl?: THREE.WebGLRenderer | THREE.WebGLRendererParameters;
+    gl?: THREE.WebGLRenderer | Partial<THREE.WebGLRendererParameters>;
     events?: (store: UseStore<RootState>) => EventManager<TCanvas>;
     size?: Size;
     mode?: typeof modes[number];

package/dist/react-three-fiber.cjs.dev.js

@@ -74,7 +74,7 @@ const is = {
 };
 
 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) {
@@ -306,7 +306,7 @@ 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));
@@ -704,16 +704,18 @@ function createRenderer(roots) {
     } // Auto-attach geometries and materials
 
 
-    if (name.endsWith('Geometry')) {
-      props = {
-        attach: 'geometry',
-        ...props
-      };
-    } else if (name.endsWith('Material')) {
-      props = {
-        attach: 'material',
-        ...props
-      };
+    if (!('attachFns' in props)) {
+      if (name.endsWith('Geometry')) {
+        props = {
+          attach: 'geometry',
+          ...props
+        };
+      } else if (name.endsWith('Material')) {
+        props = {
+          attach: 'material',
+          ...props
+        };
+      }
     } // 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
@@ -736,6 +738,14 @@ function createRenderer(roots) {
         parentInstance[child.attachObject[0]][child.attachObject[1]] = child;
       } else if (child.attach && !is.fun(child.attach)) {
         parentInstance[child.attach] = child;
+      } else if (is.arr(child.attachFns)) {
+        const [attachFn] = child.attachFns;
+
+        if (is.str(attachFn) && is.fun(parentInstance[attachFn])) {
+          parentInstance[attachFn](child);
+        } else if (is.fun(attachFn)) {
+          attachFn(child, parentInstance);
+        }
       } else if (child.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
@@ -814,6 +824,14 @@ function createRenderer(roots) {
         delete parentInstance[child.attachObject[0]][child.attachObject[1]];
       } else if (child.attach && !is.fun(child.attach)) {
         parentInstance[child.attach] = null;
+      } else if (is.arr(child.attachFns)) {
+        const [, detachFn] = child.attachFns;
+
+        if (is.str(detachFn) && is.fun(parentInstance[detachFn])) {
+          parentInstance[detachFn](child);
+        } else if (is.fun(detachFn)) {
+          detachFn(child, parentInstance);
+        }
       } else if (child.isObject3D) {
         var _child$__r3f;
 
@@ -826,7 +844,7 @@ 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
@@ -855,7 +873,13 @@ function createRenderer(roots) {
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        scheduler.unstable_runWithPriority(scheduler.unstable_IdlePriority, () => child.dispose());
+        scheduler.unstable_runWithPriority(scheduler.unstable_IdlePriority, () => {
+          try {
+            child.dispose();
+          } catch (e) {
+            /* ... */
+          }
+        });
       }
 
       invalidateInstance(parentInstance);
@@ -1163,6 +1187,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
       flat,
       scene: prepare(new THREE__namespace.Scene()),
       camera,
+      controls: null,
       raycaster,
       clock,
       mouse: new THREE__namespace.Vector2(),
@@ -1237,8 +1262,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)
@@ -1558,23 +1583,21 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }, fallback));
 });
 
+function useStore() {
+  const store = React__namespace.useContext(context);
+  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  return store;
+}
 function useThree(selector = state => state, equalityFn) {
-  const useStore = React__namespace.useContext(context);
-  if (!useStore) throw `R3F hooks can only be used within the Canvas component!`;
-  return useStore(selector, equalityFn);
+  return useStore()(selector, equalityFn);
 }
 function useFrame(callback, renderPriority = 0) {
-  const {
-    subscribe
-  } = React__namespace.useContext(context).getState().internal; // Update ref
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
 
   const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe/unsub
+  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => {
-    const unsubscribe = subscribe(ref, renderPriority);
-    return () => unsubscribe();
-  }, [renderPriority, subscribe]);
+  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority]);
   return null;
 }
 
@@ -1629,6 +1652,11 @@ useLoader.preload = function (Proto, input, extensions) {
   return useAsset.useAsset.preload(loadingFn(extensions), Proto, ...keys);
 };
 
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return useAsset.useAsset.clear(Proto, ...keys);
+};
+
 const roots = new Map();
 const modes = ['legacy', 'blocking', 'concurrent'];
 const {
@@ -1832,4 +1860,5 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;
+exports.useStore = useStore;
 exports.useThree = useThree;

package/dist/react-three-fiber.cjs.prod.js

@@ -74,7 +74,7 @@ const is = {
 };
 
 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) {
@@ -306,7 +306,7 @@ 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));
@@ -704,16 +704,18 @@ function createRenderer(roots) {
     } // Auto-attach geometries and materials
 
 
-    if (name.endsWith('Geometry')) {
-      props = {
-        attach: 'geometry',
-        ...props
-      };
-    } else if (name.endsWith('Material')) {
-      props = {
-        attach: 'material',
-        ...props
-      };
+    if (!('attachFns' in props)) {
+      if (name.endsWith('Geometry')) {
+        props = {
+          attach: 'geometry',
+          ...props
+        };
+      } else if (name.endsWith('Material')) {
+        props = {
+          attach: 'material',
+          ...props
+        };
+      }
     } // 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
@@ -736,6 +738,14 @@ function createRenderer(roots) {
         parentInstance[child.attachObject[0]][child.attachObject[1]] = child;
       } else if (child.attach && !is.fun(child.attach)) {
         parentInstance[child.attach] = child;
+      } else if (is.arr(child.attachFns)) {
+        const [attachFn] = child.attachFns;
+
+        if (is.str(attachFn) && is.fun(parentInstance[attachFn])) {
+          parentInstance[attachFn](child);
+        } else if (is.fun(attachFn)) {
+          attachFn(child, parentInstance);
+        }
       } else if (child.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
@@ -814,6 +824,14 @@ function createRenderer(roots) {
         delete parentInstance[child.attachObject[0]][child.attachObject[1]];
       } else if (child.attach && !is.fun(child.attach)) {
         parentInstance[child.attach] = null;
+      } else if (is.arr(child.attachFns)) {
+        const [, detachFn] = child.attachFns;
+
+        if (is.str(detachFn) && is.fun(parentInstance[detachFn])) {
+          parentInstance[detachFn](child);
+        } else if (is.fun(detachFn)) {
+          detachFn(child, parentInstance);
+        }
       } else if (child.isObject3D) {
         var _child$__r3f;
 
@@ -826,7 +844,7 @@ 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
@@ -855,7 +873,13 @@ function createRenderer(roots) {
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        scheduler.unstable_runWithPriority(scheduler.unstable_IdlePriority, () => child.dispose());
+        scheduler.unstable_runWithPriority(scheduler.unstable_IdlePriority, () => {
+          try {
+            child.dispose();
+          } catch (e) {
+            /* ... */
+          }
+        });
       }
 
       invalidateInstance(parentInstance);
@@ -1163,6 +1187,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
       flat,
       scene: prepare(new THREE__namespace.Scene()),
       camera,
+      controls: null,
       raycaster,
       clock,
       mouse: new THREE__namespace.Vector2(),
@@ -1237,8 +1262,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)
@@ -1558,23 +1583,21 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }, fallback));
 });
 
+function useStore() {
+  const store = React__namespace.useContext(context);
+  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  return store;
+}
 function useThree(selector = state => state, equalityFn) {
-  const useStore = React__namespace.useContext(context);
-  if (!useStore) throw `R3F hooks can only be used within the Canvas component!`;
-  return useStore(selector, equalityFn);
+  return useStore()(selector, equalityFn);
 }
 function useFrame(callback, renderPriority = 0) {
-  const {
-    subscribe
-  } = React__namespace.useContext(context).getState().internal; // Update ref
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
 
   const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe/unsub
+  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => {
-    const unsubscribe = subscribe(ref, renderPriority);
-    return () => unsubscribe();
-  }, [renderPriority, subscribe]);
+  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority]);
   return null;
 }
 
@@ -1629,6 +1652,11 @@ useLoader.preload = function (Proto, input, extensions) {
   return useAsset.useAsset.preload(loadingFn(extensions), Proto, ...keys);
 };
 
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return useAsset.useAsset.clear(Proto, ...keys);
+};
+
 const roots = new Map();
 const modes = ['legacy', 'blocking', 'concurrent'];
 const {
@@ -1832,4 +1860,5 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;
+exports.useStore = useStore;
 exports.useThree = useThree;

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

@@ -40,7 +40,7 @@ const is = {
 };
 
 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) {
@@ -272,7 +272,7 @@ 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));
@@ -670,16 +670,18 @@ function createRenderer(roots) {
     } // Auto-attach geometries and materials
 
 
-    if (name.endsWith('Geometry')) {
-      props = {
-        attach: 'geometry',
-        ...props
-      };
-    } else if (name.endsWith('Material')) {
-      props = {
-        attach: 'material',
-        ...props
-      };
+    if (!('attachFns' in props)) {
+      if (name.endsWith('Geometry')) {
+        props = {
+          attach: 'geometry',
+          ...props
+        };
+      } else if (name.endsWith('Material')) {
+        props = {
+          attach: 'material',
+          ...props
+        };
+      }
     } // 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
@@ -702,6 +704,14 @@ function createRenderer(roots) {
         parentInstance[child.attachObject[0]][child.attachObject[1]] = child;
       } else if (child.attach && !is.fun(child.attach)) {
         parentInstance[child.attach] = child;
+      } else if (is.arr(child.attachFns)) {
+        const [attachFn] = child.attachFns;
+
+        if (is.str(attachFn) && is.fun(parentInstance[attachFn])) {
+          parentInstance[attachFn](child);
+        } else if (is.fun(attachFn)) {
+          attachFn(child, parentInstance);
+        }
       } else if (child.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
@@ -780,6 +790,14 @@ function createRenderer(roots) {
         delete parentInstance[child.attachObject[0]][child.attachObject[1]];
       } else if (child.attach && !is.fun(child.attach)) {
         parentInstance[child.attach] = null;
+      } else if (is.arr(child.attachFns)) {
+        const [, detachFn] = child.attachFns;
+
+        if (is.str(detachFn) && is.fun(parentInstance[detachFn])) {
+          parentInstance[detachFn](child);
+        } else if (is.fun(detachFn)) {
+          detachFn(child, parentInstance);
+        }
       } else if (child.isObject3D) {
         var _child$__r3f;
 
@@ -792,7 +810,7 @@ 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
@@ -821,7 +839,13 @@ function createRenderer(roots) {
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        unstable_runWithPriority(unstable_IdlePriority, () => child.dispose());
+        unstable_runWithPriority(unstable_IdlePriority, () => {
+          try {
+            child.dispose();
+          } catch (e) {
+            /* ... */
+          }
+        });
       }
 
       invalidateInstance(parentInstance);
@@ -1129,6 +1153,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
       flat,
       scene: prepare(new THREE.Scene()),
       camera,
+      controls: null,
       raycaster,
       clock,
       mouse: new THREE.Vector2(),
@@ -1203,8 +1228,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)
@@ -1524,23 +1549,21 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   }, fallback));
 });
 
+function useStore() {
+  const store = React.useContext(context);
+  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  return store;
+}
 function useThree(selector = state => state, equalityFn) {
-  const useStore = React.useContext(context);
-  if (!useStore) throw `R3F hooks can only be used within the Canvas component!`;
-  return useStore(selector, equalityFn);
+  return useStore()(selector, equalityFn);
 }
 function useFrame(callback, renderPriority = 0) {
-  const {
-    subscribe
-  } = React.useContext(context).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]);
   return null;
 }
 
@@ -1595,6 +1618,11 @@ useLoader.preload = function (Proto, input, extensions) {
   return useAsset.preload(loadingFn(extensions), Proto, ...keys);
 };
 
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return useAsset.clear(Proto, ...keys);
+};
+
 const roots = new Map();
 const modes = ['legacy', 'blocking', 'concurrent'];
 const {
@@ -1777,4 +1805,4 @@ reconciler.injectIntoDevTools({
   version: '17.0.2'
 });
 
-export { Canvas, threeTypes as ReactThreeFiber, roots as _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, context, createPortal, dispose, createPointerEvents as events, extend, invalidate, reconciler, render, unmountComponentAtNode, useFrame, useGraph, useLoader, useThree };
+export { Canvas, threeTypes as ReactThreeFiber, roots as _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, context, createPortal, dispose, createPointerEvents as events, extend, invalidate, reconciler, render, unmountComponentAtNode, useFrame, useGraph, useLoader, useStore, useThree };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "7.0.3",
+  "version": "7.0.7",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",