fix(explorer): use functional state updates to fix rendering loop

bento-platform · Aug 22, 2024 · 76529b5 · 76529b5
1 parent 88aa98a
commit 76529b5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 15 deletions.
diff --git a/src/components/discovery/DiscoveryQueryBuilder.js b/src/components/discovery/DiscoveryQueryBuilder.js
@@ -124,12 +124,10 @@ const DiscoveryQueryBuilder = ({ activeDataset, dataTypeForms, requiredDataTypes
     setSchemasModalShown((s) => !s);
   }, []);
 
-  const handleSetFormRef = useCallback(
-    (dataType, form) => {
-      setForms({ ...forms, [dataType.id]: form });
-    },
-    [forms],
-  );
+  const handleSetFormRef = useCallback((dataType, form) => {
+    // Without a functional state update, this triggers an infinite loop in rendering variant search
+    setForms((forms) => ({ ...forms, [dataType.id]: form }));
+  }, []);
 
   useEffect(() => {
     if (autoQuery?.isAutoQuery && shouldExecAutoQueryPt2) {

diff --git a/src/components/discovery/DiscoverySearchForm.js b/src/components/discovery/DiscoverySearchForm.js
@@ -115,15 +115,12 @@ const DiscoverySearchForm = ({ onChange, dataType, setFormRef, handleVariantHidd
     [dataType],
   );
 
-  const updateHelpFromFieldChange = useCallback(
-    (k, change) => {
-      setConditionsHelp({
-        ...conditionsHelp,
-        [k]: change.fieldSchema.description, // can be undefined
-      });
-    },
-    [conditionsHelp],
-  );
+  const updateHelpFromFieldChange = useCallback((k, change) => {
+    setConditionsHelp((h) => ({
+      ...h,
+      [k]: change.fieldSchema.description, // can be undefined
+    }));
+  }, []);
 
   const getInitialOperator = useCallback(
     (field, fieldSchema) => {