[DataGrid] Fix error caused by trying to render rows that are not in the state anymore #17057
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
arminmeh
added
bug 🐛
|
Thanks for adding a type label to the PR! 👍 |
arminmeh
commented
Mar 20, 2025
| @@ -98,7 +98,6 @@ export function useGridColumns( | |||
|
|
|||
| apiRef.current.setState(mergeColumnsState(columnsState)); | |||
| apiRef.current.publishEvent('columnsChange', columnsState.orderedFields); | |||
| apiRef.current.updateRenderContext?.(); | |||
There was a problem hiding this comment.
removed this because it is being called after the event anyway
https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx#L691
arminmeh
changed the title
|
Deploy preview: https://deploy-preview-17057--material-ui-x.netlify.app/ |
cherniavskii
approved these changes
Mar 24, 2025
| @@ -125,7 +128,7 @@ const GridRow = forwardRef<HTMLDivElement, GridRowProps>(function GridRow(props, | |||
| rowReordering, | |||
| ); | |||
| const handleRef = useForkRef(ref, refProp); | |||
| const rowNode = apiRef.current.getRowNode(rowId); | |||
| const rowNode = gridRowNodeSelector(apiRef, rowId); | |||
There was a problem hiding this comment.
Is this change here just for the non-nullable return type?
There was a problem hiding this comment.
that and also because getRowNode is deprecated
|
Cherry-pick PRs will be created targeting branches: v7.x |
github-actions bot
pushed a commit
that referenced
this pull request
Mar 24, 2025
…the state anymore (#17057)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #16638 (still have to verify since there is no reproduction code)
Fixes #17022
Removes the need for #16672
The root cause for this is dealing with state from different update cycles.
Rows are rendered from
getRowswhich uses rows data obtained throughuseGridSelectorhere.Once those rows are rendered, they use
getRowParamAPI which throws if the row is not there, but it gets row information from the state directly.If the updates are too fast, it can happen that the rendering lags behind and tries to get params for the row that is not there anymore.
Worth mentioning is that I was able to reproduce this only on React 18, which might explain this.
Using selector directly here solves the linked issues, but introduces a lot of other issue where we need reactivity.
So, my solution is to check the row tree once more before setting a row to be rendered. Instead of doing this in the row component I have moved it up in the chain to prevent all other unnecessary row processing.