[DataGrid] React 18

[oliviertassinari]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

This is an umbrella issue to keep track of the effort necessary toward supporting React 18. It might be painful. We will learn more once the core supports it (effort lead by Sebastian).

• React blog post: The Plan for React 18
• React working group: https://github.com/reactwg/react-18/discussions

Details ✍️

• Broken column order Checkbox column appended instead of prepended in concurrent mode #1562
• We can no longer measure renders with useEffect [test] Count profiler renders not passive effects material-ui#26678

mui-x/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx

Lines 232 to 241 in 4509391

	let renderCellCount = 0;
	function CounterRender(props) {
	React.useEffect(() => {
	if (props.value === 'Nike') {
	renderCellCount += 1;
	}
	});
	return props.value;
	}

• Update peer dependency to accept React 18 https://github.com/mui/mui-x/releases/tag/v5.9.0
• Update the internals

[fahadashiq12]

Is MUI Data Grid Table compatible with React 18?

import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

I am installing both but doesn't work out..

[flaviendelangle]

@m4theushw I let you answer 👍

[david-schopf]

Is MUI Data Grid Table compatible with React 18?

import { DataGridPro } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator';

I am installing both but doesn't work out..

The peer dependency is locked to React 17

[m4theushw]

The next release will be compatible with React 18.

[shivamchamoli09]

@m4theushw , @flaviendelangle any updates on this release which is going to be for react 18 compatibility.

[flaviendelangle]

@shivamchamoli09 the DataGrid is compatible with React 18 since v5.9.0: https://github.com/mui/mui-x/releases/tag/v5.9.0.

This issue is only open because we need to migrate some of our tooling (the benchmarks mainly) to be compatible fully with React 18