[DataGridPro] Fetch new rows only once when multiple models are changed in one cycle (@arminmeh)

[arminmeh]

Cherry-pick of #16101 and #16395

[mui-bot]

Deploy preview: https://deploy-preview-16382--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 23d55dd

[lauri865]

Are you sure these tests function properly?

For whatever reason, useMemo is triggered multiple times per test, even with an empty dependency array. So callCount can't be accurate, since it's reset multiple times per test it seems.

Edited dataSourceTreeData.DataGridPro.test.tsx

Moved fetchRowSpy clearing into a hook:

beforeEach(() => {
    console.log('RESET');
    fetchRowsSpy.resetHistory();
});

Added a console.log to useMemo:

const dataSource: GridDataSource = React.useMemo(() => {
      console.log('useMemo');
      // [redacted]
}, []);
```

Tests start failing:
```
Chrome Headless 133.0.0.0 (Mac OS 10.15.7) WARN: 'including inaccessible elements by default'
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
.
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
.
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
.
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
.
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
Chrome Headless 133.0.0.0 (Mac OS 10.15.7) <DataGridPro /> - Data source tree data should fetch nested data when clicking on a dropdown FAILED
	AssertionError: expected 1 to equal 11
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
Chrome Headless 133.0.0.0 (Mac OS 10.15.7) <DataGridPro /> - Data source tree data should fetch nested data when calling API method `unstable_dataSource.fetchRows` FAILED
	AssertionError: expected 1 to equal 11
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
Chrome Headless 133.0.0.0 (Mac OS 10.15.7) <DataGridPro /> - Data source tree data should lazily fetch nested data when using `defaultGroupingExpansionDepth` FAILED
	AssertionError: expected +0 to be above +0
```

[lauri865]

When I add the dep back into useMemo:

LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
.
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
.
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
.
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
.
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
LOG: 'useMemo'
LOG: 'useMemo'
Chrome Headless 133.0.0.0 (Mac OS 10.15.7) <DataGridPro /> - Data source tree data should fetch nested data when clicking on a dropdown FAILED
	AssertionError: expected 3 to equal 2
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
LOG: 'useMemo'
LOG: 'useMemo'
Chrome Headless 133.0.0.0 (Mac OS 10.15.7) <DataGridPro /> - Data source tree data should fetch nested data when calling API method `unstable_dataSource.fetchRows` FAILED
	AssertionError: expected 2 to equal 1
LOG: 'RESET'
LOG: 'useMemo'
LOG: 'useMemo'
LOG: 'useMemo'
LOG: 'useMemo'
Chrome Headless 133.0.0.0 (Mac OS 10.15.7) <DataGridPro /> - Data source tree data should lazily fetch nested data when using `defaultGroupingExpansionDepth` FAILED
	AssertionError: expected 2 to equal 1

[lauri865]

Modified useMockServer to return a stable reference for fetchRows with useEventCallback

Have many failing tests around datasource now (17 browser tests I think), all of them share the same flaw – fetchRows is not stable (changes when data changes for example) dataSource prop is unstable as a result, and everytime it changes, fetchRowSpy gets reset and datasource hooks trigger a new fetch.

I wonder if the datasource prop is something that should be aggressively memoized by default by the Datagrid (if the creators are struggling, think about the average developer 🙈) – feels like too easy to make mistakes, and something that ought not to actually need to change during rendering.

[arminmeh]

I wonder if the datasource prop is something that should be aggressively memoized by default by the Datagrid (if the creators are struggling, think about the average developer 🙈).

This only occurs because of unstable fetchRows from useMockServer. If you use fetch in prod then it should be perfectly fine. Depending on the implementation, using some other library hooks may be an issue. I mean, we can make it more stable but my feeling is that it is not a problem in a real world implementations.

all of them share the same flaw – fetchRows is not stable (changes when data changes for example)

Yes, this is the exact problem. I have basically worked around it.
It is all caused by this.

Data is created after the initial render. This makes fetchRows change, which changes the dataSource.
Thing is, I reset the counter after each dataSource change because the first version calls the spy, but the mock server returns an empty response, because data is not there yet.

Once the fetchRows stabilizes, it will start returning data and the counter will count the request properly.

You can add this after the response

const getRowsResponse = await fetchRows(url);
console.log('getRowsResponse', getRowsResponse);

and add verbose output in the serverOptions

const serverOptions = { minDelay: 0, maxDelay: 0, verbose: true };

that will log exactly one request (with tests expecting one request) even though useMemo appears multiple times.

I have noticed that some test are passing prematurely because they wait for one request which is an empty response and the second (real one) comes after that.

If you have time to fix this, so that we have stable fetchRows this that would be great.
I plan to look at it after I finish some other more pressing tasks

Modified useMockServer to return a stable reference for fetchRows with useEventCallback

This will cause the mock server to always return an empty response.

[lauri865]

Better yet would be to use a non-hook version of mockServer for testing purposes, as I suggested here #16395 (e.g. making sure the mockServer is ready before mounting any components, to avoid having to deal with unrelated state changes in tests)