Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[data grid] Detail panel rerenders on scroll #15413

Open
achoud444 opened this issue Nov 14, 2024 · 3 comments · May be fixed by #15506
Open

[data grid] Detail panel rerenders on scroll #15413

achoud444 opened this issue Nov 14, 2024 · 3 comments · May be fixed by #15506
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Master-detail Related to the data grid Master-detail feature status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@achoud444
Copy link

achoud444 commented Nov 14, 2024 •
edited by github-actions bot
Loading

Steps to reproduce

Steps:

  1. Open this link to live example: (required)

Current behavior

I am using a lazy loading detail panel. When I expand a row, scroll to the bottom, and then scroll back to the top, the detail panel reloads.

You check on the link by putting a log in the useEffect

Expected behavior

The detail panel should not re-render once it has been mounted.

Context

Since re-rendering is occurring so frequently, it will trigger backend API calls repeatedly, leading to performance issues.

Your environment

npx @mui/envinfo 
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: [data grid] Detail panel rerenders on scroll
@achoud444 achoud444 added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 14, 2024
@michelengelen
Copy link
Member

Hey @achoud444 ... this is a "problem" related to virtualization. The row unmounts when scrolled away and remounts when scrolled back into view leading to the rerendering. I am not sure if we can do anything about this.

@romgrk is this something we can somehow support with a workaround?

@michelengelen michelengelen added component: data grid This is the name of the generic UI component, not the React module! status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it feature: Master-detail Related to the data grid Master-detail feature and removed bug 🐛 Something doesn't work labels Nov 14, 2024
@cherniavskii
Copy link
Member

Hi @achoud444
This is the optimization that is part of our virtualization engine, thus it's an expected behavior.
Did you consider caching the detail panel content? With libraries like React Query it's built-in, but for your use case specifically, you can do this on the component level: https://codesandbox.io/p/sandbox/thirsty-austin-mhw6c6?file=%2Fsrc%2FDemo.tsx
Is this what you're looking for?

@cherniavskii cherniavskii added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 18, 2024
@achoud444
Copy link
Author

@cherniavskii , I was aware of this workaround but assumed it wasn’t the default behavior of MUI, which is why I reported it as a bug. For now, this works for me, so I can proceed with it as is.

Thank you! :-)

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Nov 20, 2024
@cherniavskii cherniavskii linked a pull request Nov 20, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Master-detail Related to the data grid Master-detail feature status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[docs] Add data caching to lazy loaded detail panel demo cherniavskii/mui-x
3 participants
@cherniavskii @michelengelen @achoud444