refactor(clerk-js): Avoid useEffect usage for feedbacks

clerk · Oct 3, 2023 · a053296 · a053296
1 parent eb19804
commit a053296
Showing 1 changed file with 31 additions and 25 deletions.
diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/clerk-js/src/ui/elements/FormControl.tsx
@@ -1,6 +1,7 @@
 import type { FieldId } from '@clerk/types';
 import type { ClerkAPIError } from '@clerk/types';
 import type { PropsWithChildren } from 'react';
+import { useRef } from 'react';
 import { useEffect } from 'react';
 import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 
@@ -148,15 +149,15 @@ type FormFeedbackProps = Partial<ReturnType<typeof useFormControlFeedback>['debo
 
 export const FormFeedback = (props: FormFeedbackProps) => {
   const { id, elementDescriptors, feedback, feedbackType = 'info' } = props;
-  const [feedbacks, setFeedbacks] = useState<{
+  const feedbacksRef = useRef<{
     a?: Feedback;
     b?: Feedback;
   }>({ a: { feedback, feedbackType, shouldEnter: true }, b: undefined });
   const { calculateHeight: calculateHeightA, height: heightA } = useCalculateErrorTextHeight({
-    feedback: feedbacks.a?.feedback || '',
+    feedback: feedbacksRef.current.a?.feedback || '',
   });
   const { calculateHeight: calculateHeightB, height: heightB } = useCalculateErrorTextHeight({
-    feedback: feedbacks.b?.feedback || '',
+    feedback: feedbacksRef.current.b?.feedback || '',
   });
   const [heightMax, setHeightMax] = useState(Math.max(heightA, heightB));
 
@@ -168,28 +169,33 @@ export const FormFeedback = (props: FormFeedbackProps) => {
     success: descriptors.formFieldSuccessText,
   };
 
-  useEffect(() => {
-    setFeedbacks(oldFeedbacks => {
-      if (oldFeedbacks.a?.shouldEnter) {
-        return {
-          a: { ...oldFeedbacks.a, shouldEnter: false },
-          b: {
-            feedback,
-            feedbackType,
-            shouldEnter: true,
-          },
-        };
-      } else {
-        return {
-          a: {
-            feedback,
-            feedbackType,
-            shouldEnter: true,
-          },
-          b: { ...oldFeedbacks.b, shouldEnter: false },
-        };
-      }
-    });
+  const feedbacks = useMemo(() => {
+    const oldFeedbacks = feedbacksRef.current;
+    let result: {
+      a?: Feedback;
+      b?: Feedback;
+    };
+    if (oldFeedbacks.a?.shouldEnter) {
+      result = {
+        a: { ...oldFeedbacks.a, shouldEnter: false },
+        b: {
+          feedback,
+          feedbackType,
+          shouldEnter: true,
+        },
+      };
+    } else {
+      result = {
+        a: {
+          feedback,
+          feedbackType,
+          shouldEnter: true,
+        },
+        b: { ...oldFeedbacks.b, shouldEnter: false },
+      };
+    }
+    feedbacksRef.current = result;
+    return result;
   }, [feedback, feedbackType]);
 
   useEffect(() => {