DataTable: multiple frozen columns is very slow to render

[RolT]

Describe the bug

When using multiple frozen columns, the table rendering gets really slow. I'm seeing a lot of forced reflows. Looking at the performance page, with a datatable with 3 frozen columns & 25 rows, I'm seeing 43 calls to updateStickyPosition which does both query the DOM with getBoundingRect(). This triggers a lot of layout trashing.

In our app, rendering that datatable takes 1.8s (vs ~150ms without the frozen columns). The linked reproducer is not as slow as what I'm getting in my app, but it does show a performance difference.

Reproducer

https://stackblitz.com/edit/c1zzt2ad?file=src%2FApp.jsx

System Information

primereact 10.9.7

Steps to reproduce the behavior

1. Click on a column to sort
2. Slow render
3. Click "Unfreeze cols" button
4. Click on a column to sort
5. Fast render

Expected behavior

No response

[kaylaa0]

Need performance comparisons between older versions such as 10.9.7, 10.9.6, 10.9.4 and older.

[RolT]

I got some big improvements by using useLayoutEffect instead of useEffect around the updateStickyPosition calls and removing the unnecessary style update elementRef.current.style.left = left + 'px'; (those updates are already handled by setStyleObjectState). I'll try to make a proper reproducer that really highlight this issue and a propose a patch.

This issue is especially annoying in our project because there is a second bug: using dataKey breaks the memoization of rows or cells, and I'm forced to use dataKey because otherwise selection does not work.

[RolT]

I finally found why it was happening in our project and why I could create a simple reproducer. This was due to a performance bug in react-dnd.

I still thing we should use useLayoutEffect instead of useEffect for this operation, it marginally improves performance and avoids a flicker effect this it happens before paint (and also it was designed for this very purpose). I'll provide an MR soon.