Merge pull request #371 from Renumics/feature/show-errors-from-use-ce…

…ll-values fix: cancel delayed promise after remount
Renumics · Nov 17, 2023 · 3aa6d48 · 3aa6d48
2 parents 6be079e + 14f88c7
commit 3aa6d48
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/src/lenses/LensFactory.tsx b/src/lenses/LensFactory.tsx
@@ -8,7 +8,7 @@ import LoadingIndicator from '../components/LoadingIndicator';
 import useMemoWithPrevious from '../hooks/useMemoWithPrevious';
 import { DataColumn, LensKey, LensSettings, Setter } from '../types';
 import LensContext from './LensContext';
-import useCellValues from './useCellValue';
+import useCellValues from './useCellValues';
 import None from './None';
 import { isLensCompatible, useComponentsStore } from '../stores/components';
 
@@ -95,7 +95,9 @@ const LensFactory: React.FunctionComponent<Props> = ({
     const types = columns.map((c) => c.type);
     const allEditable = columns.every((c) => c.editable);
 
-    if (problem) return <Info>Failed to load value!</Info>;
+    if (problem) {
+        return <Info>Failed to load value!</Info>;
+    }
     if (!values || !urls) return <LoadingIndicator delay={100} />;
     if (!LensComponent) return <Info>View not found ({view})!</Info>;
     if (!isLensCompatible(LensComponent, types, allEditable))

diff --git a/src/lenses/useCellValue.ts → src/lenses/useCellValues.ts b/src/lenses/useCellValue.ts → src/lenses/useCellValues.ts
@@ -51,8 +51,16 @@ function useCellValues(
     // store all values in promises
     const promisesRef = useRef<Record<string, Promise<unknown>>>({});
 
+    const cancelledRef = useRef<boolean>(false);
+    useEffect(() => {
+        // reset cancelled for StrictMode in dev
+        cancelledRef.current = false;
+        return () => {
+            cancelledRef.current = true;
+        };
+    }, []);
+
     useEffect(() => {
-        let cancelled = false;
         const promises = promisesRef.current;
 
         if (generationId !== previousGenerationId) {
@@ -68,27 +76,27 @@ function useCellValues(
                     // only refresh lazy string columns (for now)
                     if (column.type.kind === 'str' || !promises[columnKey]) {
                         promises[columnKey] = delay(deferLoading ? 250 : 0).then(() => {
-                            return fetchValue(
-                                rowIndex,
-                                columnKeys[i],
-                                column.type.binary
-                            );
+                            if (!cancelledRef.current)
+                                return fetchValue(
+                                    rowIndex,
+                                    columnKeys[i],
+                                    column.type.binary
+                                );
                         });
                     }
                 }
             }
             Promise.all(Object.values(promises))
                 .then((values) => {
-                    if (!cancelled) setValues(values);
+                    if (!cancelledRef.current) setValues(values);
                 })
                 .catch((error) => {
-                    if (!cancelled) setProblem(error);
+                    if (!cancelledRef.current) {
+                        console.error(error);
+                        setProblem(error);
+                    }
                 });
         }
-
-        return () => {
-            cancelled = true;
-        };
     }, [
         cellEntries,
         columnKeys,