[DataGrid] Using lazy loading with server side sorting raises an error

[jose-vilasboas-rlabs]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-xtoshv?file=Demo.tsx
I have picked your exact example for lazy loading and just enabled the sorting option for each column adding this line:
data.columns.forEach((item) => (item.sortable = true));

Steps:
1.Scroll up and down several times to load as much rows as possible
2.Change the sorting in any of the available columns

Note: You may have to load several records and perform sorting several times to achieve the issue

Current behavior

An error is printed in the console and the rows are not updated.

Expected behavior

No error printed and the the rows should be correctly updated.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.2
  Binaries:
    Node: 21.3.0 - /opt/homebrew/bin/node
    Yarn: Not Found
    npm: 10.2.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 120.0.6099.109
  npmPackages:
    @types/react: ^18.2.42 => 18.2.45 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.3.2 => 5.3.3 

Search keywords: lazy loading, sorting, useGridRows, unstable_replaceRows
Order ID: 79663

[michelengelen]

Hey @jose-vilasboas-rlabs I am not able to reproduce the error. I tried for several minutes in multiple attempts.

Let me loop in a member from the xGrid team if he has any idea how this could happen to you.

@MBilalShafi do you know of any problems like this?

[MBilalShafi]

I was able to reproduce it after a couple attempts, @michelengelen it doesn't show on the stackblitz console, I had to open the browser's console to see it.

It seems like when updating sort multiple times, the grid variable on this line seems to become undefined which throws an error.

I haven't confirmed but this could be a quick fix I guess:

diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/grid
/x-data-grid/src/hooks/features/rows/useGridRows.ts
index 849560f83..9970d3606 100644
--- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts
@@ -440,7 +440,7 @@ export const useGridRows = (
       tree[GRID_ROOT_GROUP_ID] = { ...rootGroup, children: rootGroupChildren };
 
       // Removes potential remaining skeleton rows from the dataRowIds.
-      const dataRowIds = rootGroupChildren.filter((childId) => tree[childId]?.type === 'leaf');
+      const dataRowIds = rootGroupChildren.filter((childId) => tree?.[childId]?.type === 'leaf');
 
       apiRef.current.caches.rows.dataRowIdToModelLookup = dataRowIdToModelLookup;
       apiRef.current.caches.rows.dataRowIdToIdLookup = dataRowIdToIdLookup;

@jose-vilasboas-rlabs If you want, feel free to open up a PR with the mentioned diff to access if it resolves the issue or someone from the team should be looking into it as some bandwidth is available.

[michelengelen]

I was able to reproduce it after a couple attempts, @michelengelen it doesn't show on the stackblitz console, I had to open the browser's console to see it.

Interesting. Then the stackblitz console has a major flaw tbh.

It seems like when updating sort multiple times, the grid variable on this line seems to become undefined which throws an error.

Thanks for taking a look @MBilalShafi. I was looking around that part as well, but wasn't sure if it really is the culprit.

[jose-vilasboas-rlabs]

Hi @michelengelen and @MBilalShafi. Thanks for your fast reply.

Any news regarding the resolution of this issue?

Thanks

[michelengelen]

@jose-vilasboas-rlabs not as of now. We marked it as a 'good first issue' since the change is so small. We do this to give interested contributors a chance to pick it up.

Do you want to pick it up maybe? If not I can do it as well.

[jose-vilasboas-rlabs]

Hi again,

I have created the pull request
#11497

Hope eveything is ok with it.