From 5f383256be762565599dac0046aaff7aed7e878f Mon Sep 17 00:00:00 2001
From: Nick Summers <ntsummers1@proton.me>
Date: Tue, 24 Sep 2024 13:17:40 -0400
Subject: [PATCH] Revert "Wrap synthesize value calls in useEffect (#139774)"

This reverts commit 56ef3e3baabc2be823099e742848f065897c2079.
---
 .../components/fields/SynthesizedTable.jsx    | 37 ++++++++-----------
 .../components/fields/SynthesizedValue.jsx    | 25 +++++--------
 2 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/services/ui-src/src/components/fields/SynthesizedTable.jsx b/services/ui-src/src/components/fields/SynthesizedTable.jsx
index 89a370394..4f408b5bd 100644
--- a/services/ui-src/src/components/fields/SynthesizedTable.jsx
+++ b/services/ui-src/src/components/fields/SynthesizedTable.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { useSelector, shallowEqual } from "react-redux";
 //utils
 import synthesizeValue from "../../util/synthesize";
@@ -6,7 +6,6 @@ import synthesizeValue from "../../util/synthesize";
 import PropTypes from "prop-types";
 
 const SynthesizedTable = ({ question, tableTitle }) => {
-  const [rows, setRows] = useState([]);
   const [allStatesData, stateName, stateUserAbbr, chipEnrollments, formData] =
     useSelector(
       (state) => [
@@ -19,26 +18,22 @@ const SynthesizedTable = ({ question, tableTitle }) => {
       shallowEqual
     );
 
-  useEffect(() => {
-    const rows = question.fieldset_info.rows.map((row) =>
-      row.map((cell) => {
-        const value = synthesizeValue(
-          cell,
-          allStatesData,
-          stateName,
-          stateUserAbbr,
-          chipEnrollments,
-          formData
-        );
+  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;
-      })
-    );
-    setRows(rows);
-  }, [allStatesData, stateName, stateUserAbbr, chipEnrollments, formData]);
+      return typeof value.contents === "number" && Number.isNaN(value.contents)
+        ? { contents: "Not Available" }
+        : value;
+    })
+  );
 
   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
index 95d23457e..dba9a6d73 100644
--- a/services/ui-src/src/components/fields/SynthesizedValue.jsx
+++ b/services/ui-src/src/components/fields/SynthesizedValue.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { useSelector, shallowEqual } from "react-redux";
 //components
 import Question from "./Question";
@@ -8,7 +8,6 @@ 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) => [
@@ -21,22 +20,18 @@ const SynthesizedValue = ({ question, ...props }) => {
       shallowEqual
     );
 
-  useEffect(() => {
-    setDisplayValue(
-      synthesizeValue(
-        question.fieldset_info,
-        allStatesData,
-        stateName,
-        stateUserAbbr,
-        chipEnrollments,
-        formData
-      ).contents
-    );
-  }, [allStatesData, stateName, stateUserAbbr, chipEnrollments, formData]);
+  const value = synthesizeValue(
+    question.fieldset_info,
+    allStatesData,
+    stateName,
+    stateUserAbbr,
+    chipEnrollments,
+    formData
+  ).contents;
 
   return (
     <div>
-      <strong>Computed:</strong> {displayValue}
+      <strong>Computed:</strong> {value}
       {question.questions &&
         question.questions.map((q) => (
           <Question key={q.id} question={q} {...props} />