Steps to reproduce

Steps:

1. Open MUI demo Disable editing of specific cells within a row
2. Add any state variable to the IsCellEditableGrid component, e.g. const [editable, setEditable] = React.useState(true)
3. Use this variable in the isCellEditable callback
4. Observe the behavior of the highlighted cells

Demo: https://stackblitz.com/edit/g3buqpzu

export default function IsCellEditableGrid() {
  const [editable, setEditable] = React.useState(true);
  const [editMode, setEditMode] = React.useState<'row' | 'cell'>('cell');
  console.log({ editable, editMode });

  return (
    <Box
      sx={(theme) => ({
        height: 400,
        width: '100%',
        '& .MuiDataGrid-cell--editable': {
          bgcolor: 'rgb(217 243 190)',
          ...theme.applyStyles('dark', {
            bgcolor: '#376331',
          }),
        },
      })}
    >
      <Button
        onClick={() => setEditMode((s) => (s === 'row' ? 'cell' : 'row'))}
      >
        {editMode}
      </Button>
      <Button onClick={() => setEditable((s) => !s)}>{`${editable}`}</Button>
      <DataGrid
        rows={rows}
        columns={columns}
        editMode={editMode}
        isCellEditable={(params) => {
          console.log('isCellEditable', { editable, editMode });
          return params.row.age % 2 === 0 && editable && editMode === 'cell';
        }}
      />
    </Box>
  );
}

Current behavior

If the isCellEditable callback contains variable from the outer scope then the value of that variable is from the previous render.
This leads to issues when you rely on the current value of the useState variable or props which determines the editability of the cell.

Expected behavior

If the isCellEditable callback contains variable from the outer scope then the value of that variable is from the current render.

Context

I have all editable cells highlighted with a color. The editability of the cell is calculated based on multiple parameters (permissions, values of other cells in a row, edit mode, etc.)
So, for example, if some cell is editable when editMode === 'cell' it can be non-editable when editMode === 'row'. The stale value in the isCellEditable cause that when switching from cell to row the cell is still highlighted as "editable" until a user clicks on that cell.

P.S. I wanted to upgrade MUI from v6 to v7 and MUI-X from v7 to v8
When I migrated MUI 6.4.0 -> 7.3.2 I had to bump @mui/x-data-grid-pro from 7.23.6 -> 7.29.9 and discovered this behavior with my highlighting.
I tried the latest @mui/x-data-grid-pro version but this issues is present there as well.

Your environment

Chrome 140.0.7339.186

Search keywords: Editing, isCellEditable

Order ID: 119292