I use DataGrid from MaterialUI and I am confused by the processRowUpdate function, in particular by the fact that I cant update states in the callback function without having the values in the DataGrid reset.
I have this DataGrid:
<DataGrid
editMode="row"
rows={filteredData}
columns={columns}
pageSize={5}
checkboxSelection
autoPageSize
onRowSelectionModelChange={handleSelectSamples}
processRowUpdate={processRowUpdate}
onProcessRowUpdateError={handleProcessRowUpdateError}
sortModel={sortModel}
onSortModelChange={handleSortModelChange}
initialState={{
...data.initialState,
filter: {
filterModel: {
items: [],
quickFilterValues: [''],
},
},
}}
slots={{ toolbar: GridToolbar }}
slotProps={{
toolbar: {
showQuickFilter: true,
quickFilterProps: { debounceMs: 500 },
},
}}
/>
and my processRowUpdate looks like this:
const processRowUpdate = React.useCallback(
async (newRow) => {
// Make the HTTP request to save in the backend
await handleFoo(newRow)
return newRow
},
[],
);
now the handleFoo() refers to a function in the parent component which is called.
const handleFoo = async (newRow) => {
setHistory(newRow)
}
useEffect(()=>{
console.log(history)
}, [history])
to track if history changed, i put the useEffect. Now when i load the page and I change a value in a cell and enter, it will immediately set back the cells value to the previous but print the newRow in the console. i tried also with a fixed value (setHistory("test")): on the first try, it will reset the cell value and print "test" in the useEffect. But when i go to the next cell, it will accept any changes without resetting the cell. The state history is not passed to the child component and is not used there. Therefore, I thought the reset is not caused by a rerender due to the change of history. However, it seems as if history state changes, the cell in the DataGrid is reset and when history doesnt change, the cells value is not reset.
I read through the MUI Datagrid documentation and tried out with the code they provide, simplifying it etc. but I couldnt figure out the problem or the main issue with what Im doing and expecting. Maybe somebody could explain this behaviour to me. Thank you!