[DataGrid] Fix sortModel and filterModel resetting when columns change

[alexgonch]

Fixes #9204

This PR fixes the problem raised in the #9204 issue by implementing the suggestion of @cherniavskii

By replacing useEffect with useLayoutEffect, the setSortModel and setFilterModel methods are now called before the handleColumnsChange runs. This ensures that when both the columns and the respective model(s) change simultaneously, the DataGrid won't fire the onSortModelChange and onFilterModelChange events with erroneously empty models as their parameters.

This change fixes the problems I've had in my project, but I haven't tested it beyond that.

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-9239--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	605.4	933	860.2	789.44	129.456
Sort 100k rows	ms	512.8	1,009.2	730.4	777.48	160.751
Select 100k rows	ms	223.3	301.5	282.2	265.52	32.846
Deselect 100k rows	ms	158.2	321.1	183.1	205.04	59.403

Generated by 🚫 dangerJS against 4f14f13

[cherniavskii]

Thanks!
I also added unit tests for both filtering and sorting 👍

[MBilalShafi]

As the filterModel prop is updated, technically it's changed, shouldn't this emit a filterModelChange here? Or we only emit it once it's internally changed. (Same with sortModel)

[cherniavskii]

Good question!
In controlled mode, we don't call onChange handler if the new value is the same as the prop:

mui-x/packages/grid/x-data-grid/src/hooks/core/useGridStateInitialization.ts

Line 61 in a7b87a4

hasPropChanged: newSubState !== controlState.propModel,

mui-x/packages/grid/x-data-grid/src/hooks/core/useGridStateInitialization.ts

Lines 97 to 103 in a7b87a4

	if (controlState.propOnChange && hasPropChanged) {
	const details =
	props.signature === GridSignature.DataGridPro
	? { api: apiRef.current, reason }
	: { reason };
	controlState.propOnChange(model, details);
	}

[jonnylink]

Just a guess, but could this by we are still experiencing an issue? Refresh once and the default filters/sorts are missing. Refresh again and they are back.

[jonnylink]

I am sorry to report that this only partially resolved the issue for us.

1. First load the default sort and filters are applied
2. On refresh they are not
3. On second refresh they are applied again
4. (rinse repeat)

[cherniavskii]

Hey @jonnylink
Could you please open a new issue with a minimal reproduction example?
Thank you!

[jonnylink]

@cherniavskii
Sure thing. I'll do that as soon as I have some time. Under a few tight deadlines. Our setup might not be super easy to reproduce (we use an IndexedDB persistent TanStack cache).

Seeing as this bug fix got us halfway there, I'm fairly confident it's related.

[fabianboerner]

this is not fixed in version 5?

[cherniavskii]

@fabianboerner No, the latest stable version is v6 and we're going to release the v7 very soon.
We encourage you to migrate to v6.