Does tanstack/virtual add any debounce to scroll event?
I built a pivot table which syncs the scroll position of body, row headers, and column headers. Before using tanstack/virtual, the header is always aligned with the body. After using tanstack/virtual, I found that the headers are lagged behind the scroll position of the body. Can anyone share some insight? Thanks.
v Gif of before and after
8 Replies
adverse-sapphire•9mo ago
If there is a lot of rerendering going on during scroll it could cause lag like that.
subsequent-cyanOP•9mo ago
@Ilya Radchenko Thanks. Is there any way to work around this? Currently the header listen to the scroll event of pivot body, and sync its own scrollLeft with pivot body. If the scroll event of pivot body is fired at a lower frequency, the header will become laggy. Is it possible to still trigger the scroll of header at a normal frequency?
adverse-sapphire•9mo ago
Look for unnecessary rerenders using react devtools, try to clean those up. Do you have lag on the row headers too?
subsequent-cyanOP•9mo ago
Yes. If I scroll vertically, the row headers are laggy too.
Look for unnecessary rerenders using react devtools, try to clean those up.May you add more details? How do I tell if it's unnecessary? Like if it's in view port but when I scroll it still re-renders? How to efficiently confirm this using react dev tool? I can only think of using console.log to see which components are re-rendered during scroll, but there will be too many logs.
adverse-sapphire•9mo ago
How do I tell if it's unnecessary?basic it should not re-render when scrolling as from cell point of view nothing has changed
How to efficiently confirm this using react dev tool?via profiler, start recording and scroll see what was the outcome.
I can only think of using console.log to see which components are re-rendered during scroll,that works also
adverse-sapphire•9mo ago
You can also debug without recording, open react dev tools profiler, click the cog in top right, check "Highlight updates when components render." and start using your ap
subsequent-cyanOP•8mo ago
@Ilya Radchenko TIL! I saw this. Does this mean that all the visible cells + 5 overscanned row/columns unnecessarily rerender?
subsequent-cyanOP•8mo ago
Holy! I found that it's because I have Chrome Dev Tool open! If I close it, the lag is way less noticeable! @piecyk @Ilya Radchenko