wrap synthesize value calls in useEffect

Enterprise-CMCS · Sep 24, 2024 · 33edc78 · 33edc78
1 parent 9d2ff75
commit 33edc78
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/services/ui-src/src/components/fields/SynthesizedTable.jsx b/services/ui-src/src/components/fields/SynthesizedTable.jsx
@@ -1,11 +1,12 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector, shallowEqual } from "react-redux";
 //utils
 import synthesizeValue from "../../util/synthesize";
 //types
 import PropTypes from "prop-types";
 
 const SynthesizedTable = ({ question, tableTitle }) => {
+  const [rows, setRows] = useState([]);
   const [allStatesData, stateName, stateUserAbbr, chipEnrollments, formData] =
     useSelector(
       (state) => [
@@ -18,22 +19,26 @@ const SynthesizedTable = ({ question, tableTitle }) => {
       shallowEqual
     );
 
-  const rows = question.fieldset_info.rows.map((row) =>
-    row.map((cell) => {
-      const value = synthesizeValue(
-        cell,
-        allStatesData,
-        stateName,
-        stateUserAbbr,
-        chipEnrollments,
-        formData
-      );
+  useEffect(() => {
+    const rows = question.fieldset_info.rows.map((row) =>
+      row.map((cell) => {
+        const value = synthesizeValue(
+          cell,
+          allStatesData,
+          stateName,
+          stateUserAbbr,
+          chipEnrollments,
+          formData
+        );
 
-      return typeof value.contents === "number" && Number.isNaN(value.contents)
-        ? { contents: "Not Available" }
-        : value;
-    })
-  );
+        return typeof value.contents === "number" &&
+          Number.isNaN(value.contents)
+          ? { contents: "Not Available" }
+          : value;
+      })
+    );
+    setRows(rows);
+  }, [allStatesData, stateName, stateUserAbbr, chipEnrollments, formData]);
 
   return (
     <div className="synthesized-table ds-u-margin-top--2">

diff --git a/services/ui-src/src/components/fields/SynthesizedValue.jsx b/services/ui-src/src/components/fields/SynthesizedValue.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector, shallowEqual } from "react-redux";
 //components
 import Question from "./Question";
@@ -8,6 +8,7 @@ import synthesizeValue from "../../util/synthesize";
 import PropTypes from "prop-types";
 
 const SynthesizedValue = ({ question, ...props }) => {
+  const [displayValue, setDisplayValue] = useState();
   const [allStatesData, stateName, stateUserAbbr, chipEnrollments, formData] =
     useSelector(
       (state) => [
@@ -20,18 +21,22 @@ const SynthesizedValue = ({ question, ...props }) => {
       shallowEqual
     );
 
-  const value = synthesizeValue(
-    question.fieldset_info,
-    allStatesData,
-    stateName,
-    stateUserAbbr,
-    chipEnrollments,
-    formData
-  ).contents;
+  useEffect(() => {
+    setDisplayValue(
+      synthesizeValue(
+        question.fieldset_info,
+        allStatesData,
+        stateName,
+        stateUserAbbr,
+        chipEnrollments,
+        formData
+      ).contents
+    );
+  }, [allStatesData, stateName, stateUserAbbr, chipEnrollments, formData]);
 
   return (
     <div>
-      <strong>Computed:</strong> {value}
+      <strong>Computed:</strong> {displayValue}
       {question.questions &&
         question.questions.map((q) => (
           <Question key={q.id} question={q} {...props} />