[DataGrid] Filtering performance: cache values

packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts

@@ -85,6 +85,7 @@ export const filterRowTreeFromGroupingColumns = (
   const { rowTree, isRowMatchingFilters, filterModel } = params;
   const filteredRowsLookup: Record<GridRowId, boolean> = {};
   const filteredDescendantCountLookup: Record<GridRowId, number> = {};
+  const filterCache = {};
 
   const filterTreeNode = (
     node: GridTreeNode,
@@ -133,6 +134,7 @@ export const filterRowTreeFromGroupingColumns = (
           allResults.map((result) => result.passingQuickFilterValues),
           filterModel,
           params.apiRef,
+          filterCache,
         );
       }
     }

packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts

@@ -32,6 +32,7 @@ export const filterRowTreeFromTreeData = (
   const { rowTree, disableChildrenFiltering, isRowMatchingFilters } = params;
   const filteredRowsLookup: Record<GridRowId, boolean> = {};
   const filteredDescendantCountLookup: Record<GridRowId, number> = {};
+  const filterCache = {};
 
   const filterTreeNode = (
     node: GridTreeNode,
@@ -52,6 +53,7 @@ export const filterRowTreeFromTreeData = (
         [passingQuickFilterValues],
         params.filterModel,
         params.apiRef,
+        filterCache,
       );
     }
 

packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts

@@ -295,36 +295,44 @@ export const buildAggregatedFilterApplier = (
   });
 };
 
+const isNotNull = <T>(result: null | T): result is T => result != null;
+
+type FilterCache = {
+  cleanedFilterItems?: GridFilterItem[];
+};
+
+const filterModelItems = (
+  cache: FilterCache,
+  apiRef: React.MutableRefObject<GridApiCommunity>,
+  items: GridFilterItem[],
+) => {
+  if (!cache.cleanedFilterItems) {
+    cache.cleanedFilterItems = items.filter(
+      (item) => getFilterCallbackFromItem(item, apiRef) !== null,
+    );
+  }
+  return cache.cleanedFilterItems;
+};
+
 export const passFilterLogic = (
   allFilterItemResults: (null | GridFilterItemResult)[],
   allQuickFilterResults: (null | GridQuickFilterValueResult)[],
   filterModel: GridFilterModel,
   apiRef: React.MutableRefObject<GridApiCommunity>,
+  cache: FilterCache,
 ): boolean => {
-  const cleanedFilterItems = filterModel.items.filter(
-    (item) => getFilterCallbackFromItem(item, apiRef) !== null,
-  );
-
-  const cleanedAllFilterItemResults = allFilterItemResults.filter(
-    (result): result is GridFilterItemResult => result != null,
-  );
-
-  const cleanedAllQuickFilterResults = allQuickFilterResults.filter(
-    (result): result is GridQuickFilterValueResult => result != null,
-  );
-
-  // Defaultize operators
-  const quickFilterLogicOperator =
-    filterModel.quickFilterLogicOperator ?? getDefaultGridFilterModel().quickFilterLogicOperator;
-  const logicOperator = filterModel.logicOperator ?? getDefaultGridFilterModel().logicOperator;
+  const cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items);
+  const cleanedFilterItemResults = allFilterItemResults.filter(isNotNull);
+  const cleanedQuickFilterResults = allQuickFilterResults.filter(isNotNull);
 
   // get result for filter items model
-  if (cleanedAllFilterItemResults.length > 0) {
+  if (cleanedFilterItemResults.length > 0) {
     // Return true if the item pass with one of the rows
     const filterItemPredicate = (item: GridFilterItem) => {
-      return cleanedAllFilterItemResults.some((filterItemResult) => filterItemResult[item.id!]);
+      return cleanedFilterItemResults.some((filterItemResult) => filterItemResult[item.id!]);
     };
 
+    const logicOperator = filterModel.logicOperator ?? getDefaultGridFilterModel().logicOperator;
     if (logicOperator === GridLogicOperator.And) {
       const passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
       if (!passesAllFilters) {
@@ -339,14 +347,16 @@ export const passFilterLogic = (
   }
 
   // get result for quick filter model
-  if (cleanedAllQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
+  if (cleanedQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
     // Return true if the item pass with one of the rows
     const quickFilterValuePredicate = (value: string) => {
-      return cleanedAllQuickFilterResults.some(
+      return cleanedQuickFilterResults.some(
         (quickFilterValueResult) => quickFilterValueResult[value],
       );
     };
 
+    const quickFilterLogicOperator =
+      filterModel.quickFilterLogicOperator ?? getDefaultGridFilterModel().quickFilterLogicOperator;
     if (quickFilterLogicOperator === GridLogicOperator.And) {
       const passesAllQuickFilterValues =
         filterModel.quickFilterValues.every(quickFilterValuePredicate);

packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx

@@ -390,6 +390,8 @@ export const useGridFilter = (
         const tree = gridRowTreeSelector(apiRef);
         const rowIds = (tree[GRID_ROOT_GROUP_ID] as GridGroupNode).children;
         const filteredRowsLookup: Record<GridRowId, boolean> = {};
+        const filterCache = {};
+
         for (let i = 0; i < rowIds.length; i += 1) {
           const rowId = rowIds[i];
           let isRowPassing;
@@ -403,6 +405,7 @@ export const useGridFilter = (
               [passingQuickFilterValues],
               params.filterModel,
               apiRef,
+              filterCache,
             );
           }
           filteredRowsLookup[rowId] = isRowPassing;