diff --git a/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx index f466c1ec32ca8..07b3b25aa382d 100644 --- a/packages/grid/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/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(' - 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(); expect(getSelectedRowIds()).to.deep.equal([]); expect(getRow(0).querySelector('input')).to.have.property('checked', false); @@ -774,4 +775,54 @@ describe(' - 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 because we need to track multiple components + let commits: any[] = []; + function CustomCell(props: any) { + React.useEffect(() => { + commits.push({ + rowId: props.id, + }); + }); + return
Hello
; + } + + render( +
+ , + }, + ]} + slots={{ + row: MemoizedRow, + }} + rows={[ + { id: 0, currencyPair: 'USDGBP' }, + { id: 1, currencyPair: 'USDEUR' }, + ]} + autoHeight={isJSDOM} + checkboxSelection + /> +
, + ); + 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 }]); + }); + }); });