chore: cleanup useEffect

packages/ui/primitives/document-flow/add-fields.tsx

@@ -18,7 +18,6 @@ import {
 } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { prop, sortBy } from 'remeda';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
@@ -103,6 +102,10 @@ export const AddFieldsFormPartial = ({
 
   const [isMissingSignatureDialogVisible, setIsMissingSignatureDialogVisible] = useState(false);
 
+  const handleMissingSignatureDialogOpenChange = (value: boolean) => {
+    setIsMissingSignatureDialogVisible(value);
+  };
+
   const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
   const { currentStep, totalSteps, previousStep } = useStep();
   const canRenderBackButtonAsRemove =
@@ -511,18 +514,24 @@ export const AddFieldsFormPartial = ({
     };
   }, []);
 
-  useEffect(() => {
+  const defaultSelectedSigner = useMemo(() => {
     const recipientsByRoleToDisplay = recipients.filter(
       (recipient) =>
         recipient.role !== RecipientRole.CC && recipient.role !== RecipientRole.ASSISTANT,
     );
 
-    setSelectedSigner(
+    return (
       recipientsByRoleToDisplay.find((r) => r.sendStatus !== SendStatus.SENT) ??
-        recipientsByRoleToDisplay[0],
+      recipientsByRoleToDisplay[0]
     );
   }, [recipients]);
 
+  if (selectedSigner && !recipients.find((r) => r.id === selectedSigner.id)) {
+    setSelectedSigner(defaultSelectedSigner);
+  } else if (!selectedSigner && defaultSelectedSigner) {
+    setSelectedSigner(defaultSelectedSigner);
+  }
+
   const recipientsByRole = useMemo(() => {
     const recipientsByRole: Record<RecipientRole, Recipient[]> = {
       CC: [],
@@ -539,29 +548,6 @@ export const AddFieldsFormPartial = ({
     return recipientsByRole;
   }, [recipients]);
 
-  const recipientsByRoleToDisplay = useMemo(() => {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return (Object.entries(recipientsByRole) as [RecipientRole, Recipient[]][])
-      .filter(
-        ([role]) =>
-          role !== RecipientRole.CC &&
-          role !== RecipientRole.VIEWER &&
-          role !== RecipientRole.ASSISTANT,
-      )
-      .map(
-        ([role, roleRecipients]) =>
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          [
-            role,
-            sortBy(
-              roleRecipients,
-              [(r) => r.signingOrder || Number.MAX_SAFE_INTEGER, 'asc'],
-              [prop('id'), 'asc'],
-            ),
-          ] as [RecipientRole, Recipient[]],
-      );
-  }, [recipientsByRole]);
-
   const handleAdvancedSettings = () => {
     setShowAdvancedSettings((prev) => !prev);
   };
@@ -995,7 +981,7 @@ export const AddFieldsFormPartial = ({
 
           <MissingSignatureFieldDialog
             isOpen={isMissingSignatureDialogVisible}
-            onOpenChange={(value) => setIsMissingSignatureDialogVisible(value)}
+            onOpenChange={handleMissingSignatureDialogOpenChange}
           />
         </>
       )}

packages/ui/primitives/document-flow/field-item-advanced-settings.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
@@ -160,22 +160,32 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
 
     const defaultState: FieldMeta = getDefaultState(field.type);
 
-    const [fieldState, setFieldState] = useState(() => {
-      const savedState = localStorage.getItem(localStorageKey);
-      return savedState ? { ...defaultState, ...JSON.parse(savedState) } : defaultState;
-    });
-
-    useEffect(() => {
+    const initialFieldState = useMemo(() => {
       if (fieldMeta && typeof fieldMeta === 'object') {
         const parsedFieldMeta = ZFieldMetaSchema.parse(fieldMeta);
-
-        setFieldState({
+        return {
           ...defaultState,
           ...parsedFieldMeta,
-        });
+        };
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [fieldMeta]);
+
+      const savedState = localStorage.getItem(localStorageKey);
+      return savedState ? { ...defaultState, ...JSON.parse(savedState) } : defaultState;
+    }, [fieldMeta, defaultState, localStorageKey]);
+
+    const [fieldState, setFieldState] = useState(initialFieldState);
+
+    if (fieldMeta && typeof fieldMeta === 'object') {
+      const parsedFieldMeta = ZFieldMetaSchema.parse(fieldMeta);
+      const expectedState = {
+        ...defaultState,
+        ...parsedFieldMeta,
+      };
+
+      if (JSON.stringify(fieldState) !== JSON.stringify(expectedState)) {
+        setFieldState(expectedState);
+      }
+    }
 
     const handleFieldChange = (
       key: FieldMetaKeys,