Client: Apply some memoization

client/src/pages/filaments/list.tsx

@@ -65,23 +65,26 @@ 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(
+  const dataSource: IFilamentCollapsed[] = React.useMemo(
-    (element) => {
+    () =>
-      let vendor_name: string | null;
+      (tableProps.dataSource ?? []).map((element) => {
-      if (element.vendor) {
+        let vendor_name: string | null;
-        vendor_name = element.vendor.name;
+        if (element.vendor) {
-      } else {
+          vendor_name = element.vendor.name;
-        vendor_name = null;
+        } else {
-      }
+          vendor_name = null;
-      return { ...element, vendor_name };
+        }
-    }
+        return { ...element, vendor_name };
+      }),
+    [tableProps.dataSource]
   );
 
-  // Filter dataSource by the filters
+  // Filter and sort the dataSource
-  const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
+  const filteredDataSource = React.useMemo(() => {
-
+    const filtered = dataSource.filter(genericFilterer(typedFilters));
-  // Sort dataSource by the sorters
+    filtered.sort(genericSorter(typedSorters));
-  filteredDataSource.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(
+  const dataSource: ISpoolCollapsed[] = React.useMemo(
-    (element) => {
+    () =>
-      let filament_name: string;
+      (tableProps.dataSource ?? []).map((element) => {
-      if (element.filament.vendor && "name" in element.filament.vendor) {
+        let filament_name: string;
-        filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
+        if (element.filament.vendor && "name" in element.filament.vendor) {
-      } else {
+          filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
-        filament_name = element.filament.name ?? element.filament.id.toString();
+        } else {
-      }
+          filament_name =
-      return { ...element, filament_name };
+            element.filament.name ?? element.filament.id.toString();
-    }
+        }
+        return { ...element, filament_name };
+      }),
+    [tableProps.dataSource]
   );
 
-  // Filter dataSource by the filters
+  // Filter and sort the dataSource
-  const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
+  const filteredDataSource = React.useMemo(() => {
-
+    const filtered = dataSource.filter(genericFilterer(typedFilters));
-  // Sort dataSource by the sorters
+    filtered.sort(genericSorter(typedSorters));
-  filteredDataSource.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
+  // Collapse the dataSource to a mutable list
-  const dataSource = [...(tableProps.dataSource || [])];
+  const dataSource: IVendor[] = React.useMemo(
+    () => (tableProps.dataSource || []).map((record) => ({ ...record })),
+    [tableProps.dataSource]
+  );
 
-  // Filter dataSource by the filters
+  // Filter and sort the dataSource
-  const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
+  const filteredDataSource = React.useMemo(() => {
-
+    const filtered = dataSource.filter(genericFilterer(typedFilters));
-  // Sort dataSource by the sorters
+    filtered.sort(genericSorter(typedSorters));
-  filteredDataSource.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,32 +68,35 @@ export function genericFilterer<Obj>(filters: TypedCrudFilter<Obj>[]) {
 export function useListFiltersForField<Obj, Field extends keyof Obj>(
     dataSource: Obj[],
     field: Field): ColumnFilterItem[] {
-    const filters: ColumnFilterItem[] = [];
+    return React.useMemo(() => {
-    dataSource.forEach((element) => {
+        console.log("useListFiltersForField");
-        const value = element[field];
+        const filters: ColumnFilterItem[] = [];
-        if (typeof value === "string" && value !== "") {
+        dataSource.forEach((element) => {
-            // Make sure it's not already in the filters
+            const value = element[field];
-            if (filters.find((f) => f.value === value)) {
+            if (typeof value === "string" && value !== "") {
-                return;
+                // Make sure it's not already in the filters
+                if (filters.find((f) => f.value === value)) {
+                    return;
+                }
+                filters.push({
+                    text: value,
+                    value: value,
+                });
             }
-            filters.push({
+        });
-                text: value,
+        // Sort the filters
-                value: value,
+        filters.sort((a, b) => {
-            });
+            if (typeof a.text !== "string" || typeof b.text !== "string") {
-        }
+                return 0;
-    });
+            }
-    // Sort the filters
+            return a.text.localeCompare(b.text);
-    filters.sort((a, b) => {
+        });
-        if (typeof a.text !== "string" || typeof b.text !== "string") {
+        filters.push({
-            return 0;
+            text: "<empty>",
-        }
+            value: "",
-        return a.text.localeCompare(b.text);
+        });
-    });
+        return filters;
-    filters.push({
+    }, [dataSource, field]);
-        text: "<empty>",
-        value: "",
-    });
-    return filters;
 }
 
 /**