I have the same problem as the question below. A comment said to use useRef to wrap rows and columns and use its .current value. How do I do that??
Material-UI Data Grid onSortModelChange Causing an Infinite Loop
I could not figure out the useRef, and seeing this post is a month old you have most likely solved it by now. But for others like myself googling for a solution, here is how I solved the problem:
const [sortModel, setSortModel] = useState<GridSortModel>([
{
field: 'created',
sort: 'desc',
},
]);
const handleSortChange = (model: GridSortModel) => {
/* if statement to prevent the infinite loop by confirming model is
different than the current sortModel state */
if (JSON.stringify(model) !== JSON.stringify(sortModel)) {
setSortModel(model);
}
};
<DataGrid
rows={taskData}
columns={myWorkColumns}
sortModel={sortModel}
onSortModelChange={(model) => handleSortChange(model)}
/>