Client: Apply some memoization

client/src/pages/filaments/list.tsx

@@ -65,8 +65,9 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   useStoreInitialState("filamentList", { sorters, filters });
 
   // Collapse the dataSource to a mutable list and add a filament_name field
-  const dataSource: IFilamentCollapsed[] = (tableProps.dataSource ?? []).map(
-    (element) => {
+  const dataSource: IFilamentCollapsed[] = React.useMemo(
+    () =>
+      (tableProps.dataSource ?? []).map((element) => {
         let vendor_name: string | null;
         if (element.vendor) {
           vendor_name = element.vendor.name;
@@ -74,14 +75,16 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           vendor_name = null;
         }
         return { ...element, vendor_name };
-    }
+      }),
+    [tableProps.dataSource]
   );
 
-  // Filter dataSource by the filters
-  const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
-
-  // Sort dataSource by the sorters
-  filteredDataSource.sort(genericSorter(typedSorters));
+  // Filter and sort the dataSource
+  const filteredDataSource = React.useMemo(() => {
+    const filtered = dataSource.filter(genericFilterer(typedFilters));
+    filtered.sort(genericSorter(typedSorters));
+    return filtered;
+  }, [dataSource, typedFilters, typedSorters]);
 
   return (
     <List

client/src/pages/spools/list.tsx

@@ -66,23 +66,27 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   useStoreInitialState("spoolList", { sorters, filters });
 
   // Collapse the dataSource to a mutable list and add a filament_name field
-  const dataSource: ISpoolCollapsed[] = (tableProps.dataSource ?? []).map(
-    (element) => {
+  const dataSource: ISpoolCollapsed[] = React.useMemo(
+    () =>
+      (tableProps.dataSource ?? []).map((element) => {
         let filament_name: string;
         if (element.filament.vendor && "name" in element.filament.vendor) {
           filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
         } else {
-        filament_name = element.filament.name ?? element.filament.id.toString();
+          filament_name =
+            element.filament.name ?? element.filament.id.toString();
         }
         return { ...element, filament_name };
-    }
+      }),
+    [tableProps.dataSource]
   );
 
-  // Filter dataSource by the filters
-  const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
-
-  // Sort dataSource by the sorters
-  filteredDataSource.sort(genericSorter(typedSorters));
+  // Filter and sort the dataSource
+  const filteredDataSource = React.useMemo(() => {
+    const filtered = dataSource.filter(genericFilterer(typedFilters));
+    filtered.sort(genericSorter(typedSorters));
+    return filtered;
+  }, [dataSource, typedFilters, typedSorters]);
 
   return (
     <List

client/src/pages/vendors/list.tsx

@@ -54,14 +54,18 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   // Store state in local storage
   useStoreInitialState("vendorList", { sorters, filters });
 
-  // Copy dataSource to avoid mutating the original
-  const dataSource = [...(tableProps.dataSource || [])];
+  // Collapse the dataSource to a mutable list
+  const dataSource: IVendor[] = React.useMemo(
+    () => (tableProps.dataSource || []).map((record) => ({ ...record })),
+    [tableProps.dataSource]
+  );
 
-  // Filter dataSource by the filters
-  const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
-
-  // Sort dataSource by the sorters
-  filteredDataSource.sort(genericSorter(typedSorters));
+  // Filter and sort the dataSource
+  const filteredDataSource = React.useMemo(() => {
+    const filtered = dataSource.filter(genericFilterer(typedFilters));
+    filtered.sort(genericSorter(typedSorters));
+    return filtered;
+  }, [dataSource, typedFilters, typedSorters]);
 
   return (
     <List

client/src/utils/filtering.ts

@@ -1,5 +1,6 @@
 import { CrudFilter, CrudOperators } from "@refinedev/core";
 import { ColumnFilterItem } from "antd/es/table/interface";
+import React from "react";
 
 interface TypedCrudFilter<Obj> {
     field: keyof Obj;
@@ -67,6 +68,8 @@ export function genericFilterer<Obj>(filters: TypedCrudFilter<Obj>[]) {
 export function useListFiltersForField<Obj, Field extends keyof Obj>(
     dataSource: Obj[],
     field: Field): ColumnFilterItem[] {
+    return React.useMemo(() => {
+        console.log("useListFiltersForField");
         const filters: ColumnFilterItem[] = [];
         dataSource.forEach((element) => {
             const value = element[field];
@@ -93,6 +96,7 @@ export function useListFiltersForField<Obj, Field extends keyof Obj>(
             value: "",
         });
         return filters;
+    }, [dataSource, field]);
 }
 
 /**