[system] Memoize the return value of useThemeProps
#45943
Conversation
KenanYusuf
added
the
scope: system
Netlify deploy previewhttps://deploy-preview-45943--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
| theme = theme[themeId] || theme; | ||
| } | ||
| return getThemeProps({ theme, name, props }); | ||
| return React.useMemo(() => getThemeProps({ theme, name, props }), [theme, name, props]); |
There was a problem hiding this comment.
I doubt that props will always be a new object on every render?
see this sandbox https://codesandbox.io/p/sandbox/react-new
React.useMemo would not help.
There was a problem hiding this comment.
React.useMemo would not help.
Memoizing the return value of getThemeProps does fix this specific issue we're seeing, see mui/mui-x#17490
More context here: #43120 (comment)
|
I haven't read the details of this PR, just commenting to point out you should also read #43120 for more context. I think I didn't even fix this problem in that PR, I just ended doing some refactoring. edit: Yeah I didn't fix the problem following this discussion. I think I wanted to fix it in some other way but I forgot how. |
|
Closing this PR in favour of mui/mui-x#17490 |
5 participants
For the data grid, users are seeing unwanted re-renders when using
theme.components.MuiDataGrid.defaultPropsmui/mui-x#17128. It seems to be a result ofthemedPropshere not being stable across renders.This PR wraps the result of
getThemePropsin aReact.useMemoto make the returned value ofuseThemePropsstable across renders.I'm conscious this change affects every Material UI component, so if that's undesirable, perhaps in the data grid package we could bypass the hook and call
getThemePropsdirectly, memoizing the returned value there.