From f1ae7089535fd89f401c373ec62d01f72ecabaae Mon Sep 17 00:00:00 2001
From: Jennings Zhang <jenni_zh@protonmail.com>
Date: Thu, 7 Mar 2024 15:39:20 -0500
Subject: [PATCH] Wrap things in useMemo

---
 README.md                         | 9 ++++++++-
 examples/ReadmeExample.tsx        | 5 ++++-
 examples/demos/ModulateScalar.tsx | 2 +-
 examples/index.tsx                | 2 +-
 src/NiivueCanvas.tsx              | 8 ++++++--
 src/NiivueMutator.ts              | 5 ++++-
 6 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index ff408e6..f4f2202 100644
--- 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
index f45022d..d38d289 100644
--- 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
index 18e6c20..a6658fd 100644
--- 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
index 537982d..4702cca 100644
--- 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
index 696a4ba..c34fc78 100644
--- 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
index 4cb3c51..423721f 100644
--- 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.",
               );