From b3e387512af0d53c911e1a2da748bb20fb0332c9 Mon Sep 17 00:00:00 2001
From: Dave Samojlenko <dave.samojlenko@cds-snc.ca>
Date: Fri, 11 Oct 2024 10:22:42 -0400
Subject: [PATCH] fix: FormattedDate useEffect/initial state bug (#4383)

Refactor to initialize the dateObject from state instead of relying on useEffect
---
 .../forms/FormattedDate/FormattedDate.tsx        | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/components/clientComponents/forms/FormattedDate/FormattedDate.tsx b/components/clientComponents/forms/FormattedDate/FormattedDate.tsx
index 423b4d7a3a..3b960cdb2d 100644
--- a/components/clientComponents/forms/FormattedDate/FormattedDate.tsx
+++ b/components/clientComponents/forms/FormattedDate/FormattedDate.tsx
@@ -30,8 +30,10 @@ export const FormattedDate = (props: FormattedDateProps): React.ReactElement =>
     autocomplete = false,
   } = props;
 
-  const [dateObject, setDateObject] = useState<DateObject | null>(null);
   const [field, meta, helpers] = useField(props);
+  const [dateObject, setDateObject] = useState<DateObject | null>(
+    field.value ? JSON.parse(field.value) : null
+  );
   const { t } = useTranslation("common");
 
   let dateFormat = initialDateFormat;
@@ -55,18 +57,6 @@ export const FormattedDate = (props: FormattedDateProps): React.ReactElement =>
     }
   });
 
-  // Update the date object when the field value changes
-  useEffect(() => {
-    if (field.value) {
-      try {
-        const parsedValue = JSON.parse(field.value);
-        setDateObject(parsedValue);
-      } catch (e) {
-        setDateObject(null);
-      }
-    }
-  }, [field.value]);
-
   // Update the field value when the date object changes
   useEffect(() => {
     if (dateObject) {