[core] Add assertion about checkbox rerenders (#8974)

packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx

@@ -10,6 +10,7 @@ import {
   GridEditModes,
   useGridApiRef,
   GridApi,
+  GridRow,
 } from '@mui/x-data-grid';
 import {
   getCell,
@@ -190,7 +191,7 @@ describe('<DataGrid /> - Row Selection', () => {
       expect(getColumnHeaderCell(0).querySelectorAll('input')).to.have.length(1);
     });
 
-    it('should check and uncheck when double clicking the row', () => {
+    it('should check then uncheck when clicking twice the row', () => {
       render(<TestDataGridSelection checkboxSelection />);
       expect(getSelectedRowIds()).to.deep.equal([]);
       expect(getRow(0).querySelector('input')).to.have.property('checked', false);
@@ -774,4 +775,54 @@ describe('<DataGrid /> - Row Selection', () => {
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
   });
+
+  describe('performance', () => {
+    it('should not rerender unrelated rows', () => {
+      // TODO: remove this requirement, find ways to scope down react tree rerenders.
+      const MemoizedRow = React.memo(GridRow);
+
+      // Couldn't use <RenderCounter> because we need to track multiple components
+      let commits: any[] = [];
+      function CustomCell(props: any) {
+        React.useEffect(() => {
+          commits.push({
+            rowId: props.id,
+          });
+        });
+        return <div>Hello</div>;
+      }
+
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid
+            columns={[
+              { field: 'id', headerName: 'id', type: 'number' },
+              {
+                field: 'currencyPair',
+                headerName: 'Currency Pair',
+                renderCell: (params) => <CustomCell {...params} />,
+              },
+            ]}
+            slots={{
+              row: MemoizedRow,
+            }}
+            rows={[
+              { id: 0, currencyPair: 'USDGBP' },
+              { id: 1, currencyPair: 'USDEUR' },
+            ]}
+            autoHeight={isJSDOM}
+            checkboxSelection
+          />
+        </div>,
+      );
+      expect(getSelectedRowIds()).to.deep.equal([]);
+      expect(getRow(0).querySelector('input')).to.have.property('checked', false);
+      commits = [];
+      fireEvent.click(getCell(0, 1));
+      expect(getSelectedRowIds()).to.deep.equal([0]);
+      expect(getRow(0).querySelector('input')).to.have.property('checked', true);
+      // It shouldn't rerender rowId 1
+      expect(commits).to.deep.equal([{ rowId: 0 }]);
+    });
+  });
 });