[core] Refactor system theme props #43120

romgrk · 2024-07-30T14:41:21Z

When there are theme defaultProps, the return value of useThemeProps is not memoized and change on every render. The grid passes those props down to is subcomponents through context, so it re-renders everything on every render.

This PR makes the return props more stable.

romgrk · 2024-07-30T14:42:48Z

packages/mui-utils/src/resolveProps/resolveProps.ts

As I was reading through the implementation, I noticed this function that is called in all our components via useThemeProps or other helpers had a few issues, I did a drive-by refactor here. As this is called in (I think) every render of every component we have when there are default props, I prioritized a leaner and more efficient implementation.

Related PR, for context: #35477

romgrk · 2024-07-30T14:43:49Z

packages/mui-utils/src/resolveProps/resolveProps.ts

-      const defaultSlotProps = (defaultProps[propName] || {}) as T[keyof T];
-      const slotProps = props[propName] as {} as T[keyof T];
-      output[propName] = {} as T[keyof T];
+  for (const key in defaultProps) {


Switched the Object.keys for a for ... in loop, which is more efficient.

mui-bot · 2024-07-30T14:43:57Z

Netlify deploy preview

https://deploy-preview-43120--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against c0ac96e

romgrk · 2024-07-30T14:44:52Z

packages/mui-utils/src/resolveProps/resolveProps.ts

+    if (Object.prototype.hasOwnProperty.call(defaultProps, key)) {
+      const propName = key as keyof T;
+
+      if (propName === 'components' || propName === 'slots') {


Same for the regex name check vs string comparison. Regexes are quite efficient on modern engines but there is still some overhead: https://jsben.ch/iNyQn

I also find this a bit more readable.

romgrk · 2024-07-30T14:47:14Z

packages/mui-utils/src/resolveProps/resolveProps.ts

-      if (!slotProps || !Object.keys(slotProps)) {
-        // Reduce the iteration if the slot props is empty
-        output[propName] = defaultSlotProps;


!Object.keys(anything) is always going to be false, because it's equivalent to ![]. I'm guessing this was meant to be !Object.key(x).length. Anyway, I've replaced with a simpler version.

Did one last change, removed the empty object check optimization. Avoiding iterating an empty object isn't an interesting optimization, and it's an unlikely case, and less code is always a win.

romgrk · 2024-07-30T14:49:29Z

packages/mui-utils/src/resolveProps/resolveProps.ts

-        ...(output[propName] as any),
-      };
-    } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
-      const defaultSlotProps = (defaultProps[propName] || {}) as T[keyof T];


Setting defaultSlotProps to an empty object by default (the || {} part) makes the check that follows on line 31 (else if (!defaultSlotProps || !Object.keys(defaultSlotProps))) useless. In addition to the !Object.keys(x) pattern that is also present on line 28.

romgrk · 2024-07-30T14:50:38Z

packages/mui-utils/src/resolveProps/resolveProps.ts

-    } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
-      const defaultSlotProps = (defaultProps[propName] || {}) as T[keyof T];
-      const slotProps = props[propName] as {} as T[keyof T];
-      output[propName] = {} as T[keyof T];


This property is redefined in all 3 branches below, which are exhaustive, so the empty object allocated here is never used.

siriwatknp

👍 Appreciate the perf improvement! Can you change the target branch to next?.

Please verify the change on MUI X before merging.

romgrk · 2024-07-31T03:58:40Z

Updated the branch. What do you mean by verifying on MUI X? I used the following test code to ensure the props are now stable: https://codesandbox.io/s/angry-cray-gwhs5t

And should I ignore the argos changes?

brijeshb42 · 2024-07-31T05:48:22Z

packages/mui-system/src/useThemeProps/useThemeProps.js

@@ -7,6 +8,5 @@ export default function useThemeProps({ props, name, defaultTheme, themeId }) {
  if (themeId) {
    theme = theme[themeId] || theme;
  }
-  const mergedProps = getThemeProps({ theme, name, props });
-  return mergedProps;
+  return React.useMemo(() => getThemeProps({ theme, name, props }), [theme, name, props]);


I wonder what's the stability of props itself here ?
Have you done any benchmark for this hook ?

In the grid props is stable because we React.memo (or more exactly fastMemo) most of our components including the root one, for non-memoized components it would be stable only if the component is re-rendering because one of its hooks changed, but it wouldn't be stable if it re-renders because its parent re-rendered (the most common case I think).

Now that I think, I guess it would be possible to add the React.useMemo outside useThemeProps (in the mui-x codebase), it would avoid the cost for the rest of the components. It does feel a bit cleaner to have a stable output, but it's more performant to add it only where needed. I could be convinced either way. What do you think?

I'd also assume that most of the times, parent will re-render making the memo useless in this case.
Only of it was using some specific keys from props instead of the whole object.

I've thought about it some more and I prefer to add the memoization only where it's needed, so I've removed this part. The only thing left is the refactor for resolveProps, but it's a good refactor as there were some issues with the code there, so I'll merge this PR anyway.

I'm going to proceed with the plan above, but might need to come back. Can't wrap useThemeProps with useMemo because it is itself a hook (calling useContext), and needs to be reactively bound to the theme context change.

So useMemo(() => useThemeProps({ name, props }), [name, props])) is incorrect. I have more thinking to do because for the design-system agnostic objective for the grid I need to get rid of the dependency on useThemeProps anyway, so I'll do the thinking and merge this small refactor as-is.

siriwatknp · 2024-08-01T06:05:35Z

And should I ignore the argos changes?

Yes, looks like the changes comes from the Inter font which is external.

siriwatknp · 2024-08-01T06:06:37Z

Updated the branch. What do you mean by verifying on MUI X? I used the following test code to ensure the props are now stable: https://codesandbox.io/s/angry-cray-gwhs5t

Thanks.

mnajdova · 2024-08-02T08:09:49Z

@romgrk I merged the next branch to see if the argos tests will pass.

…i into fix-system-theme-props

brijeshb42

LGTM. Thanks for the changes.

romgrk added the core Infrastructure work going on behind the scenes label Jul 30, 2024

romgrk changed the base branch from next to master July 30, 2024 14:41

romgrk commented Jul 30, 2024

View reviewed changes

romgrk requested a review from a team July 30, 2024 14:55

romgrk mentioned this pull request Jul 30, 2024

[DataGrid] Refactor: remove useless copy mui/mui-x#14039

Merged

siriwatknp approved these changes Jul 31, 2024

View reviewed changes

siriwatknp changed the base branch from master to next July 31, 2024 02:44

siriwatknp changed the base branch from next to master July 31, 2024 02:45

fix: theme props more stable

f289863

romgrk force-pushed the fix-system-theme-props branch from cee9e21 to f289863 Compare July 31, 2024 03:00

romgrk changed the base branch from master to next July 31, 2024 03:00

lint

c57be7c

brijeshb42 reviewed Jul 31, 2024

View reviewed changes

Merge branch 'next' into fix-system-theme-props

2709aa1

romgrk added 2 commits August 5, 2024 09:09

refactor: remove useMemo

ee3f5cd

Merge branch 'fix-system-theme-props' of github.com:romgrk/material-u…

a149f07

…i into fix-system-theme-props

romgrk enabled auto-merge (squash) August 5, 2024 13:15

Merge branch 'next' into fix-system-theme-props

72c79d0

romgrk disabled auto-merge August 8, 2024 13:05

romgrk changed the title ~~[core] Fix system theme props~~ [core] Refactor system theme props Aug 8, 2024

refactor: remove low impact perf opt

c0ac96e

brijeshb42 approved these changes Aug 9, 2024

View reviewed changes

romgrk merged commit 0137be7 into mui:next Aug 9, 2024
19 checks passed

romgrk deleted the fix-system-theme-props branch August 9, 2024 06:56

Msolmaz4 mentioned this pull request Sep 17, 2024

[Snyk] Upgrade @mui/styled-engine-sc from 6.0.0-alpha.7 to 6.0.0 Msolmaz4/dasTy#2

Open

prathik2401 mentioned this pull request Sep 18, 2024

[Snyk] Upgrade @mui/styled-engine-sc from 6.0.0-alpha.7 to 6.0.0 prathik2401/my-portfolio#62

Merged

romgrk mentioned this pull request Oct 1, 2024

[DataGrid] Default theme props degrade performance mui/mui-x#10033

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Refactor system theme props #43120

[core] Refactor system theme props #43120

romgrk commented Jul 30, 2024

romgrk Jul 30, 2024 •

edited

Loading

romgrk Jul 30, 2024

mui-bot commented Jul 30, 2024 •

edited

Loading

romgrk Jul 30, 2024 •

edited

Loading

romgrk Jul 30, 2024

romgrk Aug 8, 2024

romgrk Jul 30, 2024 •

edited

Loading

romgrk Jul 30, 2024

siriwatknp left a comment •

edited

Loading

romgrk commented Jul 31, 2024

brijeshb42 Jul 31, 2024

romgrk Jul 31, 2024

brijeshb42 Aug 2, 2024

romgrk Aug 5, 2024

romgrk Aug 8, 2024

siriwatknp commented Aug 1, 2024

siriwatknp commented Aug 1, 2024

mnajdova commented Aug 2, 2024

brijeshb42 left a comment

[core] Refactor system theme props #43120

[core] Refactor system theme props #43120

Conversation

romgrk commented Jul 30, 2024

romgrk Jul 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mui-bot commented Jul 30, 2024 • edited Loading

Netlify deploy preview

Bundle size report

romgrk Jul 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romgrk Jul 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp left a comment • edited Loading

Choose a reason for hiding this comment

romgrk commented Jul 31, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp commented Aug 1, 2024

siriwatknp commented Aug 1, 2024

mnajdova commented Aug 2, 2024

brijeshb42 left a comment

Choose a reason for hiding this comment

romgrk Jul 30, 2024 •

edited

Loading

mui-bot commented Jul 30, 2024 •

edited

Loading

romgrk Jul 30, 2024 •

edited

Loading

romgrk Jul 30, 2024 •

edited

Loading

siriwatknp left a comment •

edited

Loading