-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DataGrid] Cells are rerendered at every event which drastically decreases performance #3480
Comments
The grid rerenders at every click because it needs to update the selected rows count and the focused cell. Could you detail what you're trying to build whose performance is affected by this behavior?
This can be fixed by debouncing the keydown events. |
But what if I don't need selection, keydown events, etc.? There is should be possibility to disable rerendering whole grid. I updated sandbox example with input components. Try to type something fast at this input to see these freezing. |
Are you in production build? things are much slower in dev mode. I also hope the editing mode can be uncontrolled, delay the validation on submit. |
The same thing happens in production. Rendering more than 500 components requires a lot of resources |
I opened #3484 with a small change to avoid rerendering the grid when typing into a cell that already has focus. Notice that clicking into other cells still causes a new render because we need to update the internal state and propagate that change to the other components. The following CodeSandbox demonstrates the change: https://codesandbox.io/s/datagrid-performance-issue-forked-mhlpg?file=/src/App.tsx Does it work for you? |
@m4theushw thanks, this will partially solve the problem. |
Only in DataGridPro is possible to completely disable the default event listeners. The rerender caused when clicking a row can be avoided using Could you detail more what you're trying to build where rerenders is a bottleneck? Besides the lack of debouncing when typing, which will be fixed, sorting and scroll works smoothly. |
You're kidding, right? A grid with 100 rows and 50 columns, and I am seeing on a click on a cell every cell is rendered twice, and you are asking what the performance problem is? You're saying, "Oh, yeah, if you click a cell, we will do 10,000 renders, but what's the problem?" |
Still happening... |
@justin-hoops @xepozz found any workaround / solution ? |
The problem is that when custom rendering is implemented, such as in the Row of compornents, the creation and destruction of objects occurs repeatedly. The states on the screen all revert to their initial values for a moment, and the values are reflected at the time of re-rendering. This is very unsightly. Can we consider a minimalist approach, for example, suppressing re-rendering in the case of disableVirtualization? |
@akash87 |
@xepozz and everyone else, I was very frustrated by this issue, but I found a fix which works for me. |
@akash87 I've tried this way, but my content inside the data grid is interactive and it changes the height 1) after render whole page 2) when interact with it. |
It looks like re-renders on all cells are still happening on every single key stroke during inline-editing. Do you think a new issue should be opened for it? |
Sure, open a new report with as much details as possible. |
Duplicates
Latest version
Current behavior 😯
Grid cells rerender at every event (for example focus, keydown, click, etc.).
Even in cell editing mode all cells in the grid will be rerendered with every keydown event.
Also it's not possiibe to disable event listeners with passing null as props to event callback (for example,
onCellKeyDown={null}
It makes impossible to use Data Grid with large tables (at least 50 row and 5 columns).
Expected behavior 🤔
Cells should not be rendered at every event.
Steps to reproduce 🕹
Steps:
Context 🔦
I'm trying to build a large table with 50 visible rows and 8 columns with 4 custom components. Currently performance is too low to be able to use this library.
Your environment 🌎
see code sandbox
Order ID 💳 (optional)
No response
The text was updated successfully, but these errors were encountered: