[data grid] Using `initialState` with `sort`, will trigger a `onFetchRows` function call on first load

[rafael-lopes-rlabs]

Steps to reproduce

Link to live example: https://codesandbox.io/s/mystifying-neumann-jqrhw2?file=/src/Demo.tsx

Steps:

1. Remove initialState prop.
2. Refresh the page and check for console logs
3. Add back initialState prop
4. Refresh the page and check for console logs

Current behavior

The onFetchRows function is triggered when the component initially loads if the initialState prop includes a `sort´ configuration. This causes the data to be fetched client-side automatically, instead of following the expected behavior where the initial data is fetched server-side and subsequent data is fetched client-side via lazy loading.

Expected behavior

The onFetchRows function should only be triggered when additional data is needed (scrolling down to load more rows). The initial data should only be fetched server-side.

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: Linux 6.6 Pop!_OS 22.04 LTS Binaries: Node: 21.7.1 - /run/user/1000/fnm_multishells/11297_1721987656477/bin/node npm: 10.5.0 - /run/user/1000/fnm_multishells/11297_1721987656477/bin/npm pnpm: 9.1.1 - /usr/local/bin/pnpm Browsers: Chrome: 122.0.6261.94 npmPackages: @emotion/react: 11.11.4 @emotion/styled: 11.11.5 @mui/material: ^5.16.1 => 5.16.4 @mui/x-data-grid-premium: ^7.10.0 => 7.10.0 react: 18.3.1 ```

Search keywords: initialState, onFetchRows, sorting Order ID: 79663

[michelengelen]

@MBilalShafi this looks like your area of expertise is needed here.

[MBilalShafi]

@rafael-lopes-rlabs I confirm this to be a bug, it happens because of one extra firing of the event renderedRowsIntervalChange when the render context is set for the first time. Why it doesn't cause the firing of onFetchRows when the filterModel or sortModel is unset is because this return statement gets fired which prevents the publishing of fetchRows event.

Skipping the firing of renderedRowsIntervalChange on the first renderContext update should fix the issue:

diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index 7d1669e6e..ff8314169 100644
--- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -195,8 +195,11 @@ export const useGridVirtualScroller = () => {
       // but only does something if the dimensions are also available.
       // So we wait until we have valid dimensions before publishing the first event.
       if (dimensions.isReady && didRowsIntervalChange) {
+        const isFirstRenderContextHydration = previousRowContext.current === EMPTY_RENDER_CONTEXT;
         previousRowContext.current = nextRenderContext;
-        apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
+        if (!isFirstRenderContextHydration) {
+          apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
+        }
       }

       previousContextScrollPosition.current = scrollPosition.current;

Feel free to open up a PR for the fix.

[rafael-lopes-rlabs]

Hey there,

Thanks for the quick response! I've created a PR with the fix you suggested: https://github.com/mui/mui-x/pull/14030/.

I hope everything looks good.