usecallback

kernelci · Oct 24, 2024 · 42358ce · 42358ce
1 parent 81a6a3c
commit 42358ce
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git a/dashboard/src/components/Table/TableHeader.tsx b/dashboard/src/components/Table/TableHeader.tsx
@@ -7,6 +7,8 @@ import { LiaQuestionCircle } from 'react-icons/lia';
 
 import { z } from 'zod';
 
+import { useCallback } from 'react';
+
 import { TestByCommitHash } from '@/types/tree/TreeDetails';
 import { TIndividualTest, TPathTests } from '@/types/general';
 import { formattedBreakLineValue, MessagesKey } from '@/locales/messages';
@@ -44,21 +46,23 @@ export function TableHeader({
   intlDefaultMessage,
   tooltipId,
 }: ITableHeader): JSX.Element {
+  const headerSort = useCallback(() => {
+    if (sortable)
+      if (column.getIsSorted() === 'asc') {
+        column.toggleSorting(true);
+      } else if (column.getIsSorted() === 'desc') {
+        column.clearSorting();
+      } else {
+        column.toggleSorting(false);
+      }
+  }, [column, sortable]);
+
   return (
     <span className="flex">
       <Button
         variant="ghost"
         className="justify-start px-2"
-        onClick={() => {
-          if (sortable)
-            if (column.getIsSorted() === 'asc') {
-              column.toggleSorting(true);
-            } else if (column.getIsSorted() === 'desc') {
-              column.clearSorting();
-            } else {
-              column.toggleSorting(false);
-            }
-        }}
+        onClick={headerSort}
       >
         <FormattedMessage
           key={intlKey}

diff --git a/dashboard/src/pages/TreeDetails/Tabs/Boots/BootsTable.tsx b/dashboard/src/pages/TreeDetails/Tabs/Boots/BootsTable.tsx
@@ -161,20 +161,23 @@ export function BootsTable({ treeId, testHistory }: IBootsTable): JSX.Element {
       return count;
     }, [rawData.tests]);
 
-  const onClickFilter = (filter: TestsTableFilter): void => {
-    setBootsSelectedFilter(filter);
-    navigate({
-      search: previousParams => {
-        return {
-          ...previousParams,
-          tableFilter: {
-            ...previousParams.tableFilter,
-            bootsTable: filter,
-          },
-        };
-      },
-    });
-  };
+  const onClickFilter = useCallback(
+    (filter: TestsTableFilter): void => {
+      setBootsSelectedFilter(filter);
+      navigate({
+        search: previousParams => {
+          return {
+            ...previousParams,
+            tableFilter: {
+              ...previousParams.tableFilter,
+              bootsTable: filter,
+            },
+          };
+        },
+      });
+    },
+    [navigate],
+  );
 
   const checkIfFilterIsSelected = useCallback(
     (filter: TestsTableFilter): boolean => {