Description
Describe the bug
useDataGrid props change on every render causing the table to be re-drawn. Specifically, filterModel, sortModel, onFilterModelChange, and onStateChange are new objects on every render, even if the values didn't change. Since those are passed into the DataGrid component, it re-builds the table. I couldn't figure out what downstream state was changing to cause useDataGrid to re-render. I suspect something in useTable. I'm not using syncWithLocation. Any non-trivial table will cause the page to be almost unusable.
Steps To Reproduce
I created a repo based on the template: https://github.com/bdeterling/refine-data-grid. I added some logging to show that the table is being re-rendered, and a button that forces the component to re-render. The button shouldn't cause a re-render because it's changing something unrelated to the grid.
Here's a codesandbox that matches the repo: https://codesandbox.io/p/devbox/recursing-driscoll-zc5qjk?workspaceId=ws_QNyE4qZMdGSUoSaNyCnXsk.
Open dev tools for the preview and click the force render button. You'll see the logs show the table is being redrawn. Note: everything happens twice due to strict mode, but that's not the issue - the grid shouldn't change at all when the button is pressed.
Expected behavior
The DataGrid should only re-draw when something relevant changes like the data itself, the sort columns, or the filters.
Packages
"@mui/x-data-grid": "^7.23.5",
"@refinedev/core": "^4.57.7",
"@refinedev/mui": "^6.0.3",
Additional Context
A possible work-around is to move the DataGrid component into its own function and pass down the props from useDataGrid. As long as you don't cause a re-render in the parent, it won't re-create the datagrid props and re-draw the table.