[data grid] Lazy loading details when using Master detail feature

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!

https://mui.com/x/

4.08k stars 1.26k forks source link

[data grid] Lazy loading details when using Master detail feature #13437

Closed joserodolfofreitas closed 3 months ago

joserodolfofreitas commented 3 months ago

Summary

If users don't have the data for the details locally, fetching details for each row happens when DataGrid is loaded without users querying for the details.

Motivation

If users don't have the data for the details locally, fetching details should happen on demand for performance reasons.

Live reproduction case

https://stackblitz.com/edit/react-zru5se-ssomts?file=Demo.tsx,package.json

Search keywords: lazy loading master detail

cherniavskii commented 3 months ago

A few comments on this demo:

Did you consider loading the data in the detail panel content component itself?
The getDetailPanelContent prop should not define the component inline, because for React this means that a different component is rendered every time, so it will unmount/mount it instead of just updating it. Here's a simple working example where you can see the DetailPanelContent component that is defined once, and then being used in the getDetailPanelContent function. The data loading is done in DetailPanelContent (so only when it's mounted).

I've also forked your demo and applied the points above: https://stackblitz.com/edit/react-zru5se-fxsghf?file=Demo.tsx,package.json You can see the MovieDetails component that handles the data fetching.

joserodolfofreitas commented 3 months ago

Alright, that solves the issue. Perhaps we can make it into a recipe. Thanks, @cherniavskii!

github-actions[bot] commented 3 months ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@joserodolfofreitas: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

cherniavskii commented 3 months ago

Perhaps we can make it into a recipe

Opened https://github.com/mui/mui-x/pull/13453