Get rid of senseless useCallback hooks (#2048)

* Remove senseless React.useCallback

* Remove senseless React.useCallback

kafka-ui-react-app/src/components/Alerts/Alerts.tsx

@@ -6,12 +6,9 @@ import Alert from 'components/Alerts/Alert';
 const Alerts: React.FC = () => {
   const alerts = useAppSelector(selectAll);
   const dispatch = useAppDispatch();
-  const dismiss = React.useCallback(
-    (id: string) => {
-      dispatch(alertDissmissed(id));
-    },
-    [dispatch]
-  );
+  const dismiss = (id: string) => () => {
+    dispatch(alertDissmissed(id));
+  };
 
   return (
     <>
@@ -21,7 +18,7 @@ const Alerts: React.FC = () => {
           type={type}
           title={title}
           message={message}
-          onDissmiss={() => dismiss(id)}
+          onDissmiss={dismiss(id)}
         />
       ))}
     </>

kafka-ui-react-app/src/components/App.tsx

@@ -25,12 +25,8 @@ const App: React.FC = () => {
   const clusters = useAppSelector(getClusterList);
   const [isSidebarVisible, setIsSidebarVisible] = React.useState(false);
 
-  const onBurgerClick = React.useCallback(
-    () => setIsSidebarVisible(!isSidebarVisible),
-    [isSidebarVisible]
-  );
-
-  const closeSidebar = React.useCallback(() => setIsSidebarVisible(false), []);
+  const onBurgerClick = () => setIsSidebarVisible(!isSidebarVisible);
+  const closeSidebar = () => setIsSidebarVisible(false);
 
   const location = useLocation();
 

kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx

@@ -71,38 +71,35 @@ const Actions: React.FC<ActionsProps> = ({
     setIsDeleteConnectorConfirmationVisible,
   ] = React.useState(false);
 
-  const deleteConnectorHandler = React.useCallback(async () => {
+  const deleteConnectorHandler = async () => {
     try {
       await deleteConnector({ clusterName, connectName, connectorName });
       history.push(clusterConnectorsPath(clusterName));
     } catch {
       // do not redirect
     }
-  }, [deleteConnector, clusterName, connectName, connectorName, history]);
+  };
 
-  const restartConnectorHandler = React.useCallback(() => {
+  const restartConnectorHandler = () => {
     restartConnector({ clusterName, connectName, connectorName });
-  }, [restartConnector, clusterName, connectName, connectorName]);
+  };
 
-  const restartTasksHandler = React.useCallback(
-    (actionType: ConnectorAction) => {
-      restartTasks({
-        clusterName,
-        connectName,
-        connectorName,
-        action: actionType,
-      });
-    },
-    [restartTasks, clusterName, connectName, connectorName]
-  );
+  const restartTasksHandler = (actionType: ConnectorAction) => {
+    restartTasks({
+      clusterName,
+      connectName,
+      connectorName,
+      action: actionType,
+    });
+  };
 
-  const pauseConnectorHandler = React.useCallback(() => {
+  const pauseConnectorHandler = () => {
     pauseConnector({ clusterName, connectName, connectorName });
-  }, [pauseConnector, clusterName, connectName, connectorName]);
+  };
 
-  const resumeConnectorHandler = React.useCallback(() => {
+  const resumeConnectorHandler = () => {
     resumeConnector({ clusterName, connectName, connectorName });
-  }, [resumeConnector, clusterName, connectName, connectorName]);
+  };
 
   return (
     <ConnectorActionsWrapperStyled>

kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx

@@ -27,14 +27,14 @@ export interface ListItemProps {
 const ListItem: React.FC<ListItemProps> = ({ task, restartTask }) => {
   const { clusterName, connectName, connectorName } = useParams<RouterParams>();
 
-  const restartTaskHandler = React.useCallback(async () => {
+  const restartTaskHandler = async () => {
     await restartTask({
       clusterName,
       connectName,
       connectorName,
       taskId: task.id?.task,
     });
-  }, [restartTask, clusterName, connectName, connectorName, task.id?.task]);
+  };
 
   return (
     <tr>

kafka-ui-react-app/src/components/Connect/Edit/Edit.tsx

@@ -81,26 +81,23 @@ const Edit: React.FC<EditProps> = ({
     }
   }, [config, setValue]);
 
-  const onSubmit = React.useCallback(
-    async (values: FormValues) => {
-      const connector = await updateConfig({
-        clusterName,
-        connectName,
-        connectorName,
-        connectorConfig: JSON.parse(values.config.trim()),
-      });
-      if (connector) {
-        history.push(
-          clusterConnectConnectorConfigPath(
-            clusterName,
-            connectName,
-            connectorName
-          )
-        );
-      }
-    },
-    [updateConfig, clusterName, connectName, connectorName, history]
-  );
+  const onSubmit = async (values: FormValues) => {
+    const connector = await updateConfig({
+      clusterName,
+      connectName,
+      connectorName,
+      connectorConfig: JSON.parse(values.config.trim()),
+    });
+    if (connector) {
+      history.push(
+        clusterConnectConnectorConfigPath(
+          clusterName,
+          connectName,
+          connectorName
+        )
+      );
+    }
+  };
 
   if (isConfigFetching) return <PageLoader />;
 

kafka-ui-react-app/src/components/Connect/List/ListItem.tsx

@@ -39,7 +39,7 @@ const ListItem: React.FC<ListItemProps> = ({
     setDeleteConnectorConfirmationVisible,
   ] = React.useState(false);
 
-  const handleDelete = React.useCallback(() => {
+  const handleDelete = () => {
     if (clusterName && connect && name) {
       dispatch(
         deleteConnector({
@@ -50,7 +50,7 @@ const ListItem: React.FC<ListItemProps> = ({
       );
     }
     setDeleteConnectorConfirmationVisible(false);
-  }, [clusterName, connect, dispatch, name]);
+  };
 
   const runningTasks = React.useMemo(() => {
     if (!tasksCount) return null;

kafka-ui-react-app/src/components/Connect/New/New.tsx

@@ -85,29 +85,26 @@ const New: React.FC<NewProps> = ({
     [connects]
   );
 
-  const onSubmit = React.useCallback(
-    async (values: FormValues) => {
-      const { connector } = await createConnector({
-        clusterName,
-        connectName: values.connectName,
-        newConnector: {
-          name: values.name,
-          config: JSON.parse(values.config.trim()),
-        },
-      });
-
-      if (connector) {
-        history.push(
-          clusterConnectConnectorPath(
-            clusterName,
-            connector.connect,
-            connector.name
-          )
-        );
-      }
-    },
-    [createConnector, clusterName, history]
-  );
+  const onSubmit = async (values: FormValues) => {
+    const { connector } = await createConnector({
+      clusterName,
+      connectName: values.connectName,
+      newConnector: {
+        name: values.name,
+        config: JSON.parse(values.config.trim()),
+      },
+    });
+
+    if (connector) {
+      history.push(
+        clusterConnectConnectorPath(
+          clusterName,
+          connector.connect,
+          connector.name
+        )
+      );
+    }
+  };
 
   if (areConnectsFetching) {
     return <PageLoader />;

kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx

@@ -23,10 +23,8 @@ const ClusterMenu: React.FC<Props> = ({
   cluster: { name, status, features },
   singleMode,
 }) => {
-  const hasFeatureConfigured = React.useCallback(
-    (key: ClusterFeaturesEnum) => features?.includes(key),
-    [features]
-  );
+  const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
+    features?.includes(key);
   const [isOpen, setIsOpen] = React.useState(!!singleMode);
   return (
     <S.List>

kafka-ui-react-app/src/components/Schemas/Details/Details.tsx

@@ -65,7 +65,7 @@ const Details: React.FC = () => {
   const isFetched = useAppSelector(getAreSchemaLatestFulfilled);
   const areVersionsFetched = useAppSelector(getAreSchemaVersionsFulfilled);
 
-  const onDelete = React.useCallback(async () => {
+  const onDelete = async () => {
     try {
       await schemasApiClient.deleteSchema({
         clusterName,
@@ -76,7 +76,7 @@ const Details: React.FC = () => {
       const err = await getResponse(e as Response);
       dispatch(serverErrorAlertAdded(err));
     }
-  }, [clusterName, dispatch, history, subject]);
+  };
 
   if (!isFetched || !schema) {
     return <PageLoader />;

kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx

@@ -58,56 +58,44 @@ const Edit: React.FC = () => {
       : JSON.stringify(JSON.parse(schema?.schema || '{}'), null, '\t');
   }, [schema]);
 
-  const onSubmit = React.useCallback(
-    async (props: NewSchemaSubjectRaw) => {
-      if (!schema) return;
+  const onSubmit = async (props: NewSchemaSubjectRaw) => {
+    if (!schema) return;
 
-      try {
-        if (dirtyFields.newSchema || dirtyFields.schemaType) {
-          const resp = await schemasApiClient.createNewSchema({
-            clusterName,
-            newSchemaSubject: {
-              ...schema,
-              schema: props.newSchema || schema.schema,
-              schemaType: props.schemaType || schema.schemaType,
-            },
-          });
-          dispatch(schemaAdded(resp));
-        }
-
-        if (dirtyFields.compatibilityLevel) {
-          await schemasApiClient.updateSchemaCompatibilityLevel({
-            clusterName,
-            subject,
-            compatibilityLevel: {
-              compatibility: props.compatibilityLevel,
-            },
-          });
-          dispatch(
-            schemaUpdated({
-              ...schema,
-              compatibilityLevel: props.compatibilityLevel,
-            })
-          );
-        }
+    try {
+      if (dirtyFields.newSchema || dirtyFields.schemaType) {
+        const resp = await schemasApiClient.createNewSchema({
+          clusterName,
+          newSchemaSubject: {
+            ...schema,
+            schema: props.newSchema || schema.schema,
+            schemaType: props.schemaType || schema.schemaType,
+          },
+        });
+        dispatch(schemaAdded(resp));
+      }
 
-        history.push(clusterSchemaPath(clusterName, subject));
-      } catch (e) {
-        const err = await getResponse(e as Response);
-        dispatch(serverErrorAlertAdded(err));
+      if (dirtyFields.compatibilityLevel) {
+        await schemasApiClient.updateSchemaCompatibilityLevel({
+          clusterName,
+          subject,
+          compatibilityLevel: {
+            compatibility: props.compatibilityLevel,
+          },
+        });
+        dispatch(
+          schemaUpdated({
+            ...schema,
+            compatibilityLevel: props.compatibilityLevel,
+          })
+        );
       }
-    },
-    [
-      clusterName,
-      dirtyFields.compatibilityLevel,
-      dirtyFields.newSchema,
-      dirtyFields.schemaType,
-      dispatch,
-      history,
-      schema,
-      subject,
-    ]
-  );
+
+      history.push(clusterSchemaPath(clusterName, subject));
+    } catch (e) {
+      const err = await getResponse(e as Response);
+      dispatch(serverErrorAlertAdded(err));
+    }
+  };
 
   if (!isFetched || !schema) {
     return <PageLoader />;

kafka-ui-react-app/src/components/Schemas/New/New.tsx

@@ -41,22 +41,23 @@ const New: React.FC = () => {
     formState: { isDirty, isSubmitting, errors },
   } = methods;
 
-  const onSubmit = React.useCallback(
-    async ({ subject, schema, schemaType }: NewSchemaSubjectRaw) => {
-      try {
-        const resp = await schemasApiClient.createNewSchema({
-          clusterName,
-          newSchemaSubject: { subject, schema, schemaType },
-        });
-        dispatch(schemaAdded(resp));
-        history.push(clusterSchemaPath(clusterName, subject));
-      } catch (e) {
-        const err = await getResponse(e as Response);
-        dispatch(serverErrorAlertAdded(err));
-      }
-    },
-    [clusterName, dispatch, history]
-  );
+  const onSubmit = async ({
+    subject,
+    schema,
+    schemaType,
+  }: NewSchemaSubjectRaw) => {
+    try {
+      const resp = await schemasApiClient.createNewSchema({
+        clusterName,
+        newSchemaSubject: { subject, schema, schemaType },
+      });
+      dispatch(schemaAdded(resp));
+      history.push(clusterSchemaPath(clusterName, subject));
+    } catch (e) {
+      const err = await getResponse(e as Response);
+      dispatch(serverErrorAlertAdded(err));
+    }
+  };
 
   return (
     <FormProvider {...methods}>

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -146,7 +146,7 @@ const List: React.FC<TopicsListProps> = ({
       .join('&');
   };
 
-  const handleSwitch = React.useCallback(() => {
+  const handleSwitch = () => {
     if (showInternal) {
       localStorage.setItem('hideInternalTopics', 'true');
     } else {
@@ -155,7 +155,7 @@ const List: React.FC<TopicsListProps> = ({
 
     setShowInternal(!showInternal);
     history.push(`${pathname}?page=1&perPage=${perPage || PER_PAGE}`);
-  }, [history, pathname, perPage, showInternal]);
+  };
 
   const [confirmationModal, setConfirmationModal] = React.useState<
     '' | 'deleteTopics' | 'purgeMessages'
@@ -167,25 +167,20 @@ const List: React.FC<TopicsListProps> = ({
     setConfirmationModal('');
   };
 
-  const clearSelectedTopics = React.useCallback(() => {
-    tableState.toggleSelection(false);
-  }, [tableState]);
+  const clearSelectedTopics = () => tableState.toggleSelection(false);
 
-  const searchHandler = React.useCallback(
-    (searchString: string) => {
-      setTopicsSearch(searchString);
+  const searchHandler = (searchString: string) => {
+    setTopicsSearch(searchString);
 
-      setCachedPage(page || null);
+    setCachedPage(page || null);
 
-      const newPageQuery = !searchString && cachedPage ? cachedPage : 1;
+    const newPageQuery = !searchString && cachedPage ? cachedPage : 1;
 
-      history.push(
-        `${pathname}?page=${newPageQuery}&perPage=${perPage || PER_PAGE}`
-      );
-    },
-    [setTopicsSearch, history, pathname, perPage, page]
-  );
-  const deleteOrPurgeConfirmationHandler = React.useCallback(() => {
+    history.push(
+      `${pathname}?page=${newPageQuery}&perPage=${perPage || PER_PAGE}`
+    );
+  };
+  const deleteOrPurgeConfirmationHandler = () => {
     const selectedIds = Array.from(tableState.selectedIds);
     if (confirmationModal === 'deleteTopics') {
       deleteTopics({ clusterName, topicNames: selectedIds });
@@ -195,16 +190,7 @@ const List: React.FC<TopicsListProps> = ({
     closeConfirmationModal();
     clearSelectedTopics();
     fetchTopicsList(topicsListParams);
-  }, [
-    confirmationModal,
-    clearSelectedTopics,
-    clusterName,
-    deleteTopics,
-    clearTopicsMessages,
-    tableState.selectedIds,
-    fetchTopicsList,
-    topicsListParams,
-  ]);
+  };
 
   const ActionsCell = React.memo<TableCellProps<TopicWithDetailedInfo, string>>(
     ({ hovered, dataItem: { internal, cleanUpPolicy, name } }) => {
@@ -228,20 +214,19 @@ const List: React.FC<TopicsListProps> = ({
 
       const isHidden = internal || isReadOnly || !hovered;
 
-      const deleteTopicHandler = React.useCallback(() => {
+      const deleteTopicHandler = () =>
         deleteTopic({ clusterName, topicName: name });
-      }, [name]);
 
-      const clearTopicMessagesHandler = React.useCallback(() => {
+      const clearTopicMessagesHandler = () => {
         clearTopicMessages({ clusterName, topicName: name });
         fetchTopicsList(topicsListParams);
         closeClearMessagesModal();
-      }, [name, fetchTopicsList, topicsListParams]);
+      };
 
-      const recreateTopicHandler = React.useCallback(() => {
+      const recreateTopicHandler = () => {
         recreateTopic({ clusterName, topicName: name });
         closeRecreateTopicModal();
-      }, [name]);
+      };
 
       return (
         <>

kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx

@@ -77,9 +77,7 @@ const Details: React.FC<Props> = ({
     isRecreateTopicConfirmationVisible,
     setRecreateTopicConfirmationVisible,
   ] = React.useState(false);
-  const deleteTopicHandler = React.useCallback(() => {
-    deleteTopic({ clusterName, topicName });
-  }, [clusterName, topicName, deleteTopic]);
+  const deleteTopicHandler = () => deleteTopic({ clusterName, topicName });
 
   React.useEffect(() => {
     if (isDeleted) {
@@ -87,15 +85,15 @@ const Details: React.FC<Props> = ({
     }
   }, [isDeleted, clusterName, dispatch, history]);
 
-  const clearTopicMessagesHandler = React.useCallback(() => {
+  const clearTopicMessagesHandler = () => {
     clearTopicMessages({ clusterName, topicName });
     setClearTopicConfirmationVisible(false);
-  }, [clusterName, topicName, clearTopicMessages]);
+  };
 
-  const recreateTopicHandler = React.useCallback(() => {
+  const recreateTopicHandler = () => {
     recreateTopic({ clusterName, topicName });
     setRecreateTopicConfirmationVisible(false);
-  }, [recreateTopic, clusterName, topicName]);
+  };
 
   return (
     <div>

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/EditFilter.tsx

@@ -16,13 +16,10 @@ const EditFilter: React.FC<EditFilterProps> = ({
   toggleEditModal,
   editSavedFilter,
 }) => {
-  const onSubmit = React.useCallback(
-    (values: MessageFilters) => {
-      editSavedFilter({ index: editFilter.index, filter: values });
-      toggleEditModal();
-    },
-    [editSavedFilter, editFilter.index, toggleEditModal]
-  );
+  const onSubmit = (values: MessageFilters) => {
+    editSavedFilter({ index: editFilter.index, filter: values });
+    toggleEditModal();
+  };
   return (
     <>
       <S.FilterTitle>Edit saved filter</S.FilterTitle>

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx

@@ -30,7 +30,7 @@ const MessagesTable: React.FC = () => {
   const messages = useSelector(getTopicMessges);
   const isFetching = useSelector(getIsTopicMessagesFetching);
 
-  const handleNextClick = React.useCallback(() => {
+  const handleNextClick = () => {
     const seekTo = searchParams.get('seekTo');
 
     if (seekTo) {
@@ -68,7 +68,7 @@ const MessagesTable: React.FC = () => {
         search: `?${searchParams.toString()}`,
       });
     }
-  }, [searchParams, history, messages]);
+  };
 
   return (
     <>

kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.tsx

@@ -21,14 +21,11 @@ const Breadcrumb: React.FC = () => {
     [breadcrumbContext.path]
   );
 
-  const getPathPredicate = React.useCallback(
-    (index: number) =>
-      `${breadcrumbContext.link
-        .split('/')
-        .slice(0, basePathEntriesLength + index + 1)
-        .join('/')}`,
-    [breadcrumbContext.link]
-  );
+  const getPathPredicate = (index: number) =>
+    `${breadcrumbContext.link
+      .split('/')
+      .slice(0, basePathEntriesLength + index + 1)
+      .join('/')}`;
 
   if (links.length < 2) {
     return null;

kafka-ui-react-app/src/components/common/ConfirmationModal/ConfirmationModal.tsx

@@ -23,11 +23,9 @@ const ConfirmationModal: React.FC<
   isConfirming = false,
   submitBtnText = 'Submit',
 }) => {
-  const cancelHandler = React.useCallback(() => {
-    if (!isConfirming) {
-      onCancel();
-    }
-  }, [isConfirming, onCancel]);
+  const cancelHandler = () => {
+    if (!isConfirming) onCancel();
+  };
 
   return isOpen ? (
     <ConfirmationModalWrapper>

kafka-ui-react-app/src/components/common/Dropdown/Dropdown.tsx

@@ -1,11 +1,6 @@
 import useOutsideClickRef from '@rooks/use-outside-click-ref';
 import cx from 'classnames';
-import React, {
-  PropsWithChildren,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
+import React, { PropsWithChildren, useMemo, useState } from 'react';
 
 import * as S from './Dropdown.styled';
 
@@ -23,13 +18,10 @@ const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({
 }) => {
   const [active, setActive] = useState<boolean>(false);
   const [wrapperRef] = useOutsideClickRef(() => setActive(false));
-  const onClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      setActive(!active);
-    },
-    [active]
-  );
+  const onClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setActive(!active);
+  };
 
   const classNames = useMemo(
     () =>

kafka-ui-react-app/src/components/common/DynamicTextButton/DynamicTextButton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useRef } from 'react';
 import cx from 'classnames';
 
 interface DynamicTextButtonProps {
@@ -20,11 +20,11 @@ const DynamicTextButton: React.FC<DynamicTextButtonProps> = ({
 
   const timeout = useRef(0);
 
-  const clickHandler = useCallback(() => {
+  const clickHandler = () => {
     onClick();
     setClicked(true);
     timeout.current = window.setTimeout(() => setClicked(false), delay);
-  }, [delay, onClick]);
+  };
 
   React.useEffect(() => () => window.clearTimeout(timeout.current));
 

kafka-ui-react-app/src/components/common/SmartTable/SmartTable.tsx

@@ -33,12 +33,9 @@ export const SmartTable = <T, TId extends IdType, OT = never>({
   paginated = false,
   hoverable = false,
 }: React.PropsWithChildren<SmartTableProps<T, TId, OT>>) => {
-  const handleRowSelection = React.useCallback(
-    (row: T, checked: boolean) => {
-      tableState.setRowsSelection([row], checked);
-    },
-    [tableState]
-  );
+  const handleRowSelection = (row: T, checked: boolean) => {
+    tableState.setRowsSelection([row], checked);
+  };
 
   const headerRow = React.useMemo(() => {
     const headerCells = React.Children.map(children, (child) => {

kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx

@@ -27,20 +27,17 @@ export const TableRow = <T, TId extends IdType, OT = never>({
 }: React.PropsWithChildren<TableRowProps<T, TId, OT>>): React.ReactElement => {
   const [hovered, setHovered] = React.useState(false);
 
-  const handleMouseEnter = React.useCallback(() => {
+  const handleMouseEnter = () => {
     setHovered(true);
-  }, []);
+  };
 
-  const handleMouseLeave = React.useCallback(() => {
+  const handleMouseLeave = () => {
     setHovered(false);
-  }, []);
+  };
 
-  const handleSelectChange = React.useCallback(
-    (checked: boolean) => {
-      onSelectChange?.(dataItem, checked);
-    },
-    [dataItem, onSelectChange]
-  );
+  const handleSelectChange = (checked: boolean) => {
+    onSelectChange?.(dataItem, checked);
+  };
 
   return (
     <tr

kafka-ui-react-app/src/components/common/Tabs/Tabs.tsx

@@ -21,13 +21,10 @@ const Tabs: React.FC<PropsWithChildren<TabsProps>> = ({
     setSelectedIndex(defaultSelectedIndex);
   }, [defaultSelectedIndex]);
 
-  const handleChange = React.useCallback(
-    (index: number) => {
-      setSelectedIndex(index);
-      onChange?.(index);
-    },
-    [onChange]
-  );
+  const handleChange = (index: number) => {
+    setSelectedIndex(index);
+    onChange?.(index);
+  };
 
   return (
     <>