Merge pull request #1339 from acelaya-forks/feature/avoid-side-effects

Remove not needed usages of useEffect

src/servers/CreateServer.tsx

@@ -1,7 +1,7 @@
 import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
 import { Result, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
@@ -50,26 +50,23 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
     createServers([{ ...theServerData, id }]);
     navigate(`/server/${id}`);
   }, [createServers, navigate]);
-
-  useEffect(() => {
-    if (!serverData) {
-      return;
-    }
+  const onSubmit = useCallback((newServerData: ServerData) => {
+    setServerData(newServerData);
 
     const serverExists = Object.values(servers).some(
-      ({ url, apiKey }) => serverData?.url === url && serverData?.apiKey === apiKey,
+      ({ url, apiKey }) => newServerData.url === url && newServerData.apiKey === apiKey,
     );
 
     if (serverExists) {
       toggleConfirmModal();
     } else {
-      saveNewServer(serverData);
+      saveNewServer(newServerData);
     }
-  }, [saveNewServer, serverData, servers, toggleConfirmModal]);
+  }, [saveNewServer, servers, toggleConfirmModal]);
 
   return (
     <NoMenuLayout>
-      <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={setServerData}>
+      <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={onSubmit}>
         {!hasServers && (
           <ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />
         )}

src/servers/ManageServers.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
 import { Result, SearchField, SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Row } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
@@ -34,26 +34,23 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
     useTimeoutToggle,
     ManageServersRow,
   } = useDependencies(ManageServers);
-  const allServers = Object.values(servers);
-  const [serversList, setServersList] = useState(allServers);
-  const filterServers = (searchTerm: string) => setServersList(
-    allServers.filter(({ name, url }) => `${name} ${url}`.toLowerCase().match(searchTerm.toLowerCase())),
+  const [searchTerm, setSearchTerm] = useState('');
+  const allServers = useMemo(() => Object.values(servers), [servers]);
+  const filteredServers = useMemo(
+    () => allServers.filter(({ name, url }) => `${name} ${url}`.toLowerCase().match(searchTerm.toLowerCase())),
+    [allServers, searchTerm],
   );
-  const hasAutoConnect = serversList.some(({ autoConnect }) => !!autoConnect);
+  const hasAutoConnect = allServers.some(({ autoConnect }) => !!autoConnect);
   const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
 
-  useEffect(() => {
-    setServersList(Object.values(servers));
-  }, [servers]);
-
   return (
     <NoMenuLayout>
-      <SearchField className="mb-3" onChange={filterServers} />
+      <SearchField className="mb-3" onChange={setSearchTerm} />
 
       <Row className="mb-3">
         <div className="col-md-6 d-flex d-md-block mb-2 mb-md-0">
           <ImportServersBtn className="flex-fill" onImportError={setErrorImporting}>Import servers</ImportServersBtn>
-          {allServers.length > 0 && (
+          {filteredServers.length > 0 && (
             <Button outline className="ms-2 flex-fill" onClick={async () => serversExporter.exportServers()}>
               <FontAwesomeIcon icon={exportIcon} fixedWidth /> Export servers
             </Button>
@@ -77,8 +74,8 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
             </tr>
           </thead>
           <tbody>
-            {!serversList.length && <tr className="text-center"><td colSpan={4}>No servers found.</td></tr>}
-            {serversList.map((server) => (
+            {!filteredServers.length && <tr className="text-center"><td colSpan={4}>No servers found.</td></tr>}
+            {filteredServers.map((server) => (
               <ManageServersRow key={server.id} server={server} hasAutoConnect={hasAutoConnect} />
             ))}
           </tbody>

src/servers/helpers/ServerForm.tsx

@@ -1,6 +1,6 @@
 import { InputFormGroup, SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { handleEventPreventingDefault } from '../../utils/utils';
 import type { ServerData } from '../data';
 
@@ -11,19 +11,11 @@ type ServerFormProps = PropsWithChildren<{
 }>;
 
 export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
-  const [name, setName] = useState('');
-  const [url, setUrl] = useState('');
-  const [apiKey, setApiKey] = useState('');
+  const [name, setName] = useState(initialValues?.name ?? '');
+  const [url, setUrl] = useState(initialValues?.url ?? '');
+  const [apiKey, setApiKey] = useState(initialValues?.apiKey ?? '');
   const handleSubmit = handleEventPreventingDefault(() => onSubmit({ name, url, apiKey }));
 
-  useEffect(() => {
-    if (initialValues) {
-      setName(initialValues.name);
-      setUrl(initialValues.url);
-      setApiKey(initialValues.apiKey);
-    }
-  }, [initialValues]);
-
   return (
     <form className="server-form" name="serverForm" onSubmit={handleSubmit}>
       <SimpleCard className="mb-3" title={title}>