From 8a6f3743a3eed19470fc39fb96ce4d95a80482ce Mon Sep 17 00:00:00 2001 From: Earle Castledine Date: Fri, 19 May 2023 11:47:51 +0800 Subject: [PATCH] perf(DataTable): speed up select-all with large tables Rewrite `setAllSelectedState` to improve peformance with large tables. In my test case with 10000 rows, selecting all rows previously took 14000ms. This fix reduces it to 8ms. It uses one instance of (local) variable mutation. Fixes #6146. . --- .../src/components/DataTable/DataTable.js | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js index 0c43aa03f232..803f8011295b 100644 --- a/packages/react/src/components/DataTable/DataTable.js +++ b/packages/react/src/components/DataTable/DataTable.js @@ -486,19 +486,16 @@ class DataTable extends React.Component { */ setAllSelectedState = (initialState, isSelected, filteredRowIds) => { const { rowIds } = initialState; + const isFiltered = rowIds.length != filteredRowIds.length; return { - rowsById: rowIds.reduce( - (acc, id) => ({ - ...acc, - [id]: { - ...initialState.rowsById[id], - ...(!initialState.rowsById[id].disabled && { - isSelected: filteredRowIds.includes(id) && isSelected, - }), - }, - }), - {} - ), + rowsById: rowIds.reduce((acc, id) => { + const row = { ...initialState.rowsById[id] }; + if (!row.disabled && (!isFiltered || filteredRowIds.includes(id))) { + row.isSelected = isSelected; + } + acc[id] = row; // Local mutation for performance with large tables + return acc; + }, {}), }; };