DataTable: poor performance

[inad9300]

Describe the bug

I've been noticing that the table has a really hard time keeping up with soft real time updates. At first I thought it was a limitation of React (I still think that plays a role), but I believe there are opportunities for optimization within PrimeReact.

One thing I noticed looking at the code is that domain keys aren't truly respected, see

primereact/components/lib/datatable/TableBody.js

Line 162 in 245c3c7

const getRowKey = (rowData, index) => {

The index is appended to the domain key, kind of missing the entire point of providing one. For anything other that additions at the bottom of the table (this includes filtering, sorting, etc.) the key won't be the same between renders, so React will have to recreate all DOM nodes.

There are likely more optimizations to be made, that somebody familiar with the codebase might be able to exploit. I encourage you to do some profiling to try and have a super-snappy table ⚡

Reproducer

https://codesandbox.io/s/primereact-test-forked-qhesvo?file=/src/index.js

PrimeReact version

8.7.3

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Wait to see initial data (1000 elements).
2. Wait 5 seconds. 10 new elements should be added at the top over the span of 1 second (100ms apart).
3. Observe how painfully slow that is. Use the time column to get an idea of the delays involved. During my tests, the first and last elements are about 2 second apart (i.e. it is twice as slow as expected).
4. Try the fast version (adds elements at the bottom instead of the top) as a way to verify the hypothesis that the key attribute may be the cause here.

Expected behavior

No response

[melloware]

Related to: #2979 ???

[melloware]

You are right if you remoe dataKey and just let it use the index you can see its twice as fast and only takes about 1 second.

[inad9300]

Right, I was confused at first, but that makes sense, because in that case React is able to reuse many DOM nodes, as their keys will be the same, even though they map to different domain elements. Ideally, though, domain keys should be used, as recommended by the React team.

[inad9300]

@melloware sorry to bother you with this, but do you happen to know when this feature might be released? I'm having some noticeable performance problems in my application and have high hopes for this fix ☺️

[melloware]

Sorry I don't have any insight on release timelines ☹️