Wrap things in useMemo

niivue · Mar 7, 2024 · f1ae708 · f1ae708
1 parent 03e9b1c
commit f1ae708
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -111,6 +111,8 @@ const ReadmeExample = () => {
       draft.isOrientCube = !value;
     });
   };
+
+  const volumesList = React.useMemo(() => Object.values(volumes), [volumes]);
 
   return (<>
     <div>
@@ -131,7 +133,12 @@ const ReadmeExample = () => {
         />
       </label>
     </div>
-    <div><NiivueCanvas options={options} volumes={Object.values(volumes)} /></div>
+    <div>
+      <NiivueCanvas
+        options={options}
+        volumes={React.useMemo(() => Object.values(volumes), [volumes])}
+      />
+    </div>
   </>);
 }
 ```

diff --git a/examples/ReadmeExample.tsx b/examples/ReadmeExample.tsx
@@ -54,7 +54,10 @@ const ReadmeExample = () => {
         </label>
       </div>
       <div>
-        <NiivueCanvas options={options} volumes={Object.values(volumes)} />
+        <NiivueCanvas
+          options={options}
+          volumes={React.useMemo(() => Object.values(volumes), [volumes])}
+        />
       </div>
     </>
   );

diff --git a/examples/demos/ModulateScalar.tsx b/examples/demos/ModulateScalar.tsx
@@ -149,7 +149,7 @@ const ModulateScalar = () => {
       </header>
       <main>
         <NiivueCanvas
-          volumes={Object.values(volumes)}
+          volumes={React.useMemo(() => Object.values(volumes), [volumes])}
           options={FIXED_OPTIONS}
           onStart={configNiivue}
         />

diff --git a/examples/index.tsx b/examples/index.tsx
@@ -59,5 +59,5 @@ const router = createBrowserRouter([
 ReactDOM.createRoot(document.getElementById("root")!).render(
   // Do NOT use React.StrictMode.
   // See https://github.com/niivue/niivue/issues/912
-  <RouterProvider router={router} />
+  <RouterProvider router={router} />,
 );
diff --git a/src/NiivueCanvas.tsx b/src/NiivueCanvas.tsx
@@ -52,7 +52,9 @@ const NiivueCanvas: React.FC<NiivueCanvasProps> = ({
     onStart && onStart(nv);
   };
 
-  const syncStateWithProps = async (nvMutator: NiivueMutator): Promise<boolean> => {
+  const syncStateWithProps = async (
+    nvMutator: NiivueMutator,
+  ): Promise<boolean> => {
     const configChanged = syncConfig(nvMutator);
     const [volumesChanged] = await Promise.all([syncVolumes(nvMutator)]);
     return configChanged || volumesChanged;
@@ -143,7 +145,9 @@ const NiivueCanvas: React.FC<NiivueCanvasProps> = ({
     if (!nvMutator.glIsReady()) {
       return;
     }
-    syncStateWithProps(nvMutator).then((changed) => changed && onChanged && onChanged(nv));
+    syncStateWithProps(nvMutator).then(
+      (changed) => changed && onChanged && onChanged(nv),
+    );
   }, [ready, meshes, volumes, options, onChanged]);
 
   return <canvas ref={canvasRef} />;

diff --git a/src/NiivueMutator.ts b/src/NiivueMutator.ts
@@ -68,7 +68,10 @@ class NiivueMutator {
             // this.crosshairs3D is null
             // Cannot read properties of null (reading 'mm')
             // null is not an object (evaluating 'this.crosshairs3D.mm')
-            if (e.message.includes("null") && (e.message.includes("mm") || e.message.includes("crosshairs3D"))) {
+            if (
+              e.message.includes("null") &&
+              (e.message.includes("mm") || e.message.includes("crosshairs3D"))
+            ) {
               console.warn(
                 "Caught error which was fixed in https://github.com/niivue/niivue/pull/864, please update Niivue.",
               );