Row selection using forEachNode very slow - ag-grid

Question

I am using AG Grid React. I have a thousand row of data. I am trying to select a range of rows based upon their indices.
gridOptions.api.forEachNode(node => {
if (node.childIndex >= startIndex && node.childIndex < endIndex) {
node.setSelected(true)
}
});
This is turning out to be very sow and typically takes 30 seconds on the UI. Seems like setSelected triggers multiple render cycles. What is the correct way of doing it?

Answer 1

The problem is - setSelected(newValue) dispatches events. When we do it in a loop for a thousand items(say) - there are a thousand events, a thousand requests queued for asynchronous update in React which can be accounted for all the delay.
I fixed it using another version of setSelected - setSelected(newValue, clearSelection, suppressFinishActions). Unfortunately, this is not written in the official documentation.
The idea is to use this version for all but the last selection, so that all the event dispatches are supressed and use the normal selection we have been using forever to select the last element so that it also triggers necessary events for onRowSelected, onSelectionChanged, etc. to work normally.
this.api.forEachNodeAfterFilter(node => {
if (node.childIndex >= startIndex && node.childIndex < endIndex) {
selectedNodes.push(node);
}
});
if (selectedNodes.length > 0) {
// setSelected re-renders every time so use suppressFinishActions except last one
for (let i = 0; i < selectedNodes.length - 1; i++) {
selectedNodes[i].setSelected(true, false, true);
}
selectedNodes[selectedNodes.length - 1].setSelected(true);
}

Answer 2

You can try to use pagination to load the chunk of data thane the whole data.
Pagination Docs

Answer 3

Make sure that you don't have subscribed to any events that may cause your code to be slow, e.g. onRowSelected, onSelectionChanged. These get triggered for each
node.setSelected(true)
If you do have any of these subscribed events, one possible way to solve this, is to unsubscribe before the loop and then re-subscribe after the loop.
Also, depending on your use case you may want to use
forEachNodeAfterFilter(node)
in order to only loop through visible nodes instead of
forEachNode(node)