Split useMemo in two

Author: loichuder

src/h5web/visualizations/shared/MappedVis.tsx

@@ -16,9 +16,11 @@ function MappedVis<T>(props: Props<T>): ReactElement {
   const { component: Component, dataset, value, mapperState } = props;
   const rawDims = (dataset.shape as HDF5SimpleShape).dims;
 
-  const dataArray = useMemo(() => {
-    const baseArray = ndarray<T>(value.flat(Infinity) as T[], rawDims);
+  const baseArray = useMemo(() => {
+    return ndarray<T>(value.flat(Infinity) as T[], rawDims);
+  }, [rawDims, value]);
 
+  const dataArray = useMemo(() => {
     if (mapperState === undefined) {
       return baseArray;
     }
@@ -33,7 +35,7 @@ function MappedVis<T>(props: Props<T>): ReactElement {
 
     // Create ndarray from mapped view so `dataArray.data` only contains values relevant to vis
     return ndarray<T>(unpack(mappedView).flat(), mappedView.shape);
-  }, [value, rawDims, mapperState]);
+  }, [mapperState, baseArray]);
 
   return <Component dataArray={dataArray} />;
 }