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

[joserodolfofreitas]

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]

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]

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

[github-actions]

⚠️ 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]

Perhaps we can make it into a recipe

Opened #13453