fix(components): add equality function + key to invalidate cache on useModel

Author: simonedevit

packages/library/src/core/index.ts

@@ -1,4 +1,4 @@
 export { register } from './inventory';
 export * from './store';
-export * from './useLoader';
+export * from './useModel';
 export * from './Scene';

packages/library/src/core/useLoader.tsx packages/library/src/core/useModel.tsxpackages/library/src/core/useLoader.tsx renamed to packages/library/src/core/useModel.tsx

@@ -3,6 +3,7 @@ import { suspend, clear } from 'suspend-react';
 import type { ISceneLoaderAsyncResult, ImportMeshOptions } from '@babylonjs/core';
 import { ImportMeshAsync } from '@babylonjs/core/Loading/sceneLoader.js';
 import { useScene } from './store';
+import isEqual from 'lodash/isEqual';
 
 function dispose(model: ISceneLoaderAsyncResult) {
     Object.values(model).forEach(attribute => {
@@ -15,14 +16,20 @@ function dispose(model: ISceneLoaderAsyncResult) {
 /**
  * Custom hook to load a model using Babylon.js's ImportMeshAsync function.
  *
- * @remarks This hook activates suspense.
+ * @remarks This hook activates suspense. The cache is invalidated when the url or key change.
  *
  * @param url the URL or file or ArrayBufferView of the model to load.
  * @param options optional parameters for importing the model.
  * @param onCreate the callback function to execute when the model is loaded.
+ * @param key unique identifier to invalidate the cache.
  * @returns the result of the model import.
  */
-export function useModel(url: string | File | ArrayBufferView, options?: ImportMeshOptions, onCreate?: (model: ISceneLoaderAsyncResult) => void): ISceneLoaderAsyncResult {
+export function useModel(
+    url: string | File | ArrayBufferView,
+    options?: ImportMeshOptions,
+    onCreate?: (model: ISceneLoaderAsyncResult) => void,
+    key?: string,
+): ISceneLoaderAsyncResult {
     const scene = useScene();
 
     const model = suspend(
@@ -33,15 +40,16 @@ export function useModel(url: string | File | ArrayBufferView, options?: ImportM
             }
             return result;
         },
-        [url, scene, options] /*{ equal: isEqual }*/,
+        [url, scene, key],
+        { equal: isEqual },
     );
 
     useEffect(() => {
         return () => {
             dispose(model);
             clear([url, scene, options]);
         };
-    }, []);
+    }, [url, scene, key]);
 
     return model;
 }