[data grid] Deleting a row throws "row id not found" error

[dhruvin-kanani]

Steps to reproduce

Steps:

1. Open this link in your browser
2. Open the console to check error
3. spam the delete button

Current behavior

As you can see in this video if i press delete button instantaneously then i'm getting "No row with id xxxxxxxxxx found"

20250117-1256-27.1644705.mp4

Code: https://stackblitz.com/run?file=Demo.js

Expected behavior

if i delete row instantaneously it should not give error

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: error on click of delete icon

Order ID: 91701

[michelengelen]

I cannot reproduce the issue you reported.

Also could you please share a link to the code you used? The one you provided does not work.

[dhruvin-kanani]

@michelengelen

This error is also coming in demo example of datagrid editing

To generate this issue you've to spam delete button

Link: https://mui.com/x/react-data-grid/editing/#full-featured-crud

Code: https://stackblitz.com/run?file=Demo.js

20250122-0434-02.9849596.mp4

[michelengelen]

All right ... you have to click super fast for this to pop up, but a bug is a bug, right? :P

We can eliminate the root cause by using the apiRef instead of using a rows state. Here is a diff that solves the problem in the recipe:

--- a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx
+++ b/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx
@@ -19,6 +19,8 @@ import {
   GridRowModel,
   GridRowEditStopReasons,
   GridSlotProps,
+  useGridApiContext,
+  useGridApiRef,
 } from '@mui/x-data-grid';
 import {
   randomCreatedDate,
@@ -32,7 +34,7 @@ const randomRole = () => {
   return randomArrayItem(roles);
 };

-const initialRows: GridRowsProp = [
+const rows: GridRowsProp = [
   {
     id: randomId(),
     name: randomTraderName(),
@@ -72,7 +74,6 @@ const initialRows: GridRowsProp = [

 declare module '@mui/x-data-grid' {
   interface ToolbarPropsOverrides {
-    setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void;
     setRowModesModel: (
       newModel: (oldModel: GridRowModesModel) => GridRowModesModel,
     ) => void;
@@ -80,19 +81,17 @@ declare module '@mui/x-data-grid' {
 }

 function EditToolbar(props: GridSlotProps['toolbar']) {
-  const { setRows, setRowModesModel } = props;
+  const apiRef = useGridApiContext();
+  const { setRowModesModel } = props;

-  const handleClick = () => {
+  const handleClick = React.useCallback(() => {
     const id = randomId();
-    setRows((oldRows) => [
-      ...oldRows,
-      { id, name: '', age: '', role: '', isNew: true },
-    ]);
+    apiRef.current.updateRows([{ id, name: '', age: '', role: '', isNew: true }]);
     setRowModesModel((oldModel) => ({
       ...oldModel,
       [id]: { mode: GridRowModes.Edit, fieldToFocus: 'name' },
     }));
-  };
+  }, [apiRef]);

   return (
     <GridToolbarContainer>
@@ -104,7 +103,7 @@ function EditToolbar(props: GridSlotProps['toolbar']) {
 }

 export default function FullFeaturedCrudGrid() {
-  const [rows, setRows] = React.useState(initialRows);
+  const apiRef = useGridApiRef();
   const [rowModesModel, setRowModesModel] = React.useState<GridRowModesModel>({});

   const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => {
@@ -121,25 +120,33 @@ export default function FullFeaturedCrudGrid() {
     setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
   };

-  const handleDeleteClick = (id: GridRowId) => () => {
-    setRows(rows.filter((row) => row.id !== id));
-  };
+  const handleDeleteClick = React.useCallback(
+    (id: GridRowId) => () => {
+      apiRef.current.updateRows([{ id, _action: 'delete' }]);
+    },
+    [apiRef],
+  );

-  const handleCancelClick = (id: GridRowId) => () => {
-    setRowModesModel({
-      ...rowModesModel,
-      [id]: { mode: GridRowModes.View, ignoreModifications: true },
-    });
+  const handleCancelClick = React.useCallback(
+    (id: GridRowId) => () => {
+      setRowModesModel({
+        ...rowModesModel,
+        [id]: { mode: GridRowModes.View, ignoreModifications: true },
+      });

-    const editedRow = rows.find((row) => row.id === id);
-    if (editedRow!.isNew) {
-      setRows(rows.filter((row) => row.id !== id));
-    }
-  };
+      const editedRow = apiRef.current.getRow(id);
+      if (editedRow!.isNew) {
+        apiRef.current.updateRows([{ id, _action: 'delete' }]);
+      }
+    },
+    [apiRef],
+  );

   const processRowUpdate = (newRow: GridRowModel) => {
     const updatedRow = { ...newRow, isNew: false };
-    setRows(rows.map((row) => (row.id === newRow.id ? updatedRow : row)));
+    apiRef.current.updateRows(
+      rows.map((row) => (row.id === newRow.id ? updatedRow : row)),
+    );
     return updatedRow;
   };

@@ -236,6 +243,7 @@ export default function FullFeaturedCrudGrid() {
     >
       <DataGrid
         rows={rows}
+        apiRef={apiRef}
         columns={columns}
         editMode="row"
         rowModesModel={rowModesModel}
@@ -244,7 +252,7 @@ export default function FullFeaturedCrudGrid() {
         processRowUpdate={processRowUpdate}
         slots={{ toolbar: EditToolbar }}
         slotProps={{
-          toolbar: { setRows, setRowModesModel },
+          toolbar: { setRowModesModel },
         }}
       />
     </Box>

Because this is a relatively easy fix I will open this up as a good first issue.

Thanks for reporting it! 🙇🏼

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@dhruvin-kanani How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.