#149 - Optimise useSortableDataTable logic with useMemo

croz-ltd · Jan 24, 2024 · 28a3b8d · 28a3b8d
1 parent 821537a
commit 28a3b8d
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/libs/data-display/src/useSortableDataTable.tsx b/libs/data-display/src/useSortableDataTable.tsx
@@ -1,9 +1,11 @@
+import { useMemo } from "react";
+
 import { useDataTable } from "./index";
 
 export default function useSortableDataTable<T, U extends keyof T>(initialData: T[], columnMapping: Record<U, string>) {
   const [dataTableState, dataTableHook] = useDataTable();
 
-  const generateSortedData = () => {
+  const generateSortedData = useMemo(() => {
     const sortInstructions = dataTableState.sortBy;
 
     if (!sortInstructions || sortInstructions.length === 0) {
@@ -23,8 +25,10 @@ export default function useSortableDataTable<T, U extends keyof T>(initialData:
       }
 
       return 0;
-    })
-  };
+    });
+  }, [dataTableState.sortBy]);
 
-  return { sortedData: generateSortedData(), dataTableState, dataTableHook };
+  return useMemo(() => {
+    return { sortedData: generateSortedData, dataTableState, dataTableHook };
+  }, [generateSortedData]);
 }