chore: cleanup useEffect

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.members.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -29,22 +29,29 @@ export default function TeamsSettingsMembersPage() {
   /**
    * Handle debouncing the search query.
    */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
+  const handleSearchQueryChange = useCallback(
+    (newQuery: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
 
-    params.set('query', debouncedSearchQuery);
+      if (newQuery.trim()) {
+        params.set('query', newQuery);
+      } else {
+        params.delete('query');
+      }
 
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
+      if (params.toString() === searchParams?.toString()) {
+        return;
+      }
 
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams],
+  );
 
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const currentParamQuery = searchParams?.get('query') ?? '';
+  if (currentParamQuery !== debouncedSearchQuery) {
+    handleSearchQueryChange(debouncedSearchQuery);
+  }
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.teams.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { useSearchParams } from 'react-router';
@@ -20,21 +20,28 @@ export default function OrganisationSettingsTeamsPage() {
   const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
 
   const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
   /**
    * Handle debouncing the search query.
    */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
+  const handleSearchQueryChange = useCallback(
+    (newQuery: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
 
-    params.set('query', debouncedSearchQuery);
+      if (newQuery.trim()) {
+        params.set('query', newQuery);
+      } else {
+        params.delete('query');
+      }
 
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams],
+  );
 
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const currentParamQuery = searchParams?.get('query') ?? '';
+  if (currentParamQuery !== debouncedSearchQuery) {
+    handleSearchQueryChange(debouncedSearchQuery);
+  }
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/_layout.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { Outlet, useNavigate } from 'react-router';
 
 import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
@@ -30,13 +28,8 @@ export default function Layout() {
   const currentOrganisation = organisations[0];
   const team = currentOrganisation?.teams[0] || null;
 
-  useEffect(() => {
-    if (!isPersonalLayoutMode || !team) {
-      void navigate('/settings/profile');
-    }
-  }, []);
-
   if (!isPersonalLayoutMode || !team) {
+    void navigate('/settings/profile');
     return null;
   }
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { FolderType, OrganisationType } from '@prisma/client';
@@ -12,10 +12,7 @@ import { parseToIntegerArray } from '@documenso/lib/utils/params';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { trpc } from '@documenso/trpc/react';
-import {
-  type TFindDocumentsInternalResponse,
-  ZFindDocumentsInternalRequestSchema,
-} from '@documenso/trpc/server/document-router/schema';
+import { ZFindDocumentsInternalRequestSchema } from '@documenso/trpc/server/document-router/schema';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
@@ -55,15 +52,6 @@ export default function DocumentsPage() {
   const [isMovingDocument, setIsMovingDocument] = useState(false);
   const [documentToMove, setDocumentToMove] = useState<number | null>(null);
 
-  const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
-    [ExtendedDocumentStatus.DRAFT]: 0,
-    [ExtendedDocumentStatus.PENDING]: 0,
-    [ExtendedDocumentStatus.COMPLETED]: 0,
-    [ExtendedDocumentStatus.REJECTED]: 0,
-    [ExtendedDocumentStatus.INBOX]: 0,
-    [ExtendedDocumentStatus.ALL]: 0,
-  });
-
   const findDocumentSearchParams = useMemo(
     () => ZSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
     [searchParams],
@@ -74,6 +62,19 @@ export default function DocumentsPage() {
     folderId,
   });
 
+  const stats = useMemo(
+    () =>
+      data?.stats ?? {
+        [ExtendedDocumentStatus.DRAFT]: 0,
+        [ExtendedDocumentStatus.PENDING]: 0,
+        [ExtendedDocumentStatus.COMPLETED]: 0,
+        [ExtendedDocumentStatus.REJECTED]: 0,
+        [ExtendedDocumentStatus.INBOX]: 0,
+        [ExtendedDocumentStatus.ALL]: 0,
+      },
+    [data?.stats],
+  );
+
   const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
     const params = new URLSearchParams(searchParams);
 
@@ -104,12 +105,6 @@ export default function DocumentsPage() {
     return path;
   };
 
-  useEffect(() => {
-    if (data?.stats) {
-      setStats(data.stats);
-    }
-  }, [data?.stats]);
-
   return (
     <DocumentDropZoneWrapper>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.members.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { useLocation, useSearchParams } from 'react-router';
@@ -19,26 +19,33 @@ export default function TeamsSettingsMembersPage() {
   const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
 
   const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
   /**
    * Handle debouncing the search query.
    */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
+  const handleSearchQueryChange = useCallback(
+    (newQuery: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
 
-    params.set('query', debouncedSearchQuery);
+      if (newQuery.trim()) {
+        params.set('query', newQuery);
+      } else {
+        params.delete('query');
+      }
 
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
+      // If nothing to change then do nothing.
+      if (params.toString() === searchParams?.toString()) {
+        return;
+      }
 
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams],
+  );
 
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const currentParamQuery = searchParams?.get('query') ?? '';
+  if (currentParamQuery !== debouncedSearchQuery) {
+    handleSearchQueryChange(debouncedSearchQuery);
+  }
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.public-profile.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
@@ -130,12 +130,8 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
     }
   };
 
-  useEffect(() => {
-    setIsPublicProfileVisible(profile.enabled);
-  }, [profile.enabled]);
-
   return (
-    <div className="max-w-2xl">
+    <div key={team.id} className="max-w-2xl">
       <SettingsHeader
         title={t`Public Profile`}
         subtitle={t`You can choose to enable or disable the profile for public view.`}

apps/remix/app/routes/_unauthenticated+/verify-email.$token.tsx

@@ -38,33 +38,48 @@ export default function VerifyEmailPage({ loaderData }: Route.ComponentProps) {
   const [state, setState] = useState<keyof typeof EMAIL_VERIFICATION_STATE | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  const verifyToken = async () => {
-    setIsLoading(true);
-
-    try {
-      const response = await authClient.emailPassword.verifyEmail({
-        token,
-      });
-
-      await refreshSession();
-
-      setState(response.state);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`We were unable to verify your email at this time.`),
-      });
-
-      await navigate('/verify-email');
-    }
-
-    setIsLoading(false);
-  };
-
   useEffect(() => {
-    void verifyToken();
+    let ignore = false;
+
+    const verify = async () => {
+      try {
+        setIsLoading(true);
+
+        const response = await authClient.emailPassword.verifyEmail({
+          token,
+        });
+
+        if (ignore) {
+          return;
+        }
+
+        await refreshSession();
+        setState(response.state);
+      } catch (err) {
+        if (ignore) {
+          return;
+        }
+
+        console.error(err);
+
+        toast({
+          title: _(msg`Something went wrong`),
+          description: _(msg`We were unable to verify your email at this time.`),
+        });
+
+        await navigate('/verify-email');
+      } finally {
+        if (!ignore) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void verify();
+
+    return () => {
+      ignore = true;
+    };
   }, []);
 
   if (isLoading || state === null) {