WP-778: Fix infinite loop for state update in useEffect

TACC · Nov 26, 2024 · c1c4ecd · c1c4ecd
1 parent 16ed8e2
commit c1c4ecd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/client/src/components/Applications/AppForm/AppForm.jsx b/client/src/components/Applications/AppForm/AppForm.jsx
@@ -152,7 +152,6 @@ const HandleDependentFieldChanges = ({ app, formStateUpdateHandler }) => {
   const { values, setValues } = useFormikContext();
   React.useEffect(() => {
     if (previousValues) {
-      let valueUpdated = false;
       let updatedValues = { ...values };
 
       // Set the current allocation
@@ -171,24 +170,23 @@ const HandleDependentFieldChanges = ({ app, formStateUpdateHandler }) => {
           updatedValues,
           formStateUpdateHandler
         );
-        valueUpdated = true;
       }
       if (previousValues.execSystemId !== values.execSystemId) {
         updatedValues = execSystemChangeHandler(
           app,
           values,
           formStateUpdateHandler
         );
-        valueUpdated = true;
       }
 
       if (
         previousValues.execSystemLogicalQueue !== values.execSystemLogicalQueue
       ) {
         updatedValues = updateValuesForQueue(app, values);
-        valueUpdated = true;
       }
-      if (valueUpdated) setValues(updatedValues);
+      if (JSON.stringify(updatedValues) !== JSON.stringify(values)) {
+        setValues(updatedValues);
+      }
     }
     setPreviousValues(values);
   }, [app, values, setValues, formStateUpdateHandler]);
@@ -926,6 +924,7 @@ export const AppSchemaForm = ({ app }) => {
                   ) : null}
                 </div>
                 <Button
+                  id="submit"
                   attr="submit"
                   size="medium"
                   type="primary"
@@ -936,6 +935,7 @@ export const AppSchemaForm = ({ app }) => {
                   Submit
                 </Button>
                 <Button
+                  id="reset"
                   onClick={handleReset}
                   className="btn-resetForm"
                   type="link"

diff --git a/client/src/components/_common/Form/FormField.jsx b/client/src/components/_common/Form/FormField.jsx
@@ -138,6 +138,7 @@ const FormField = ({
 
             <InputGroup>
               <Button
+                size="middle"
                 type="secondary"
                 onClick={() => setOpenTapisFileModal(true)}
               >