Skip to content

[internal] mergeSlotProps improvements#48002

Open
mj12albert wants to merge 3 commits intomui:masterfrom
mj12albert:perf/merge-slot-props
Open

[internal] mergeSlotProps improvements#48002
mj12albert wants to merge 3 commits intomui:masterfrom
mj12albert:perf/merge-slot-props

Conversation

@mj12albert
Copy link
Member

@mj12albert mj12albert commented Mar 17, 2026

Borrowed some ideas from Base UI:

  • Detect event handlers with charCodeAt checks instead of regexes
  • Replace Object.keys().filter().forEach() with for loops to remove extra array allocations
  • For the common case where the style prop is not supplied (using sx instead of style) remove unnecessary spreads and Object.keys in mergeSlotProps
  • Removed unused omitEventHandlers in Material UI (unused duplicate), a canonical version is in utils

The +0.05% gzip size increase is probably mostly from replacing the regex with charCodeAt but worth it as it could be 20-30% faster on slower devices: mui/base-ui#456

@mj12albert mj12albert added the package: utils Specific to the utils package. label Mar 17, 2026
@mui-bot
Copy link

mui-bot commented Mar 17, 2026

Netlify deploy preview

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

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+190B(+0.04%) 🔺+63B(+0.04%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 🔺+183B(+1.19%) 🔺+74B(+1.23%)

Details of bundle changes

Generated by 🚫 dangerJS against d72a7f3

@mj12albert mj12albert added internal Behind-the-scenes enhancement. Formerly called “core”. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Mar 17, 2026
@mj12albert mj12albert force-pushed the perf/merge-slot-props branch from c643f65 to d72a7f3 Compare March 17, 2026 11:50
@mj12albert mj12albert marked this pull request as ready for review March 17, 2026 13:16
Copy link

@codeCraft-Ritik codeCraft-Ritik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great contribution! The implementation is clean and integrates well with the existing codebase

Copy link
Member

@silviuaavram silviuaavram left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool stuff!

...defaultSlotPropsValue,
...externalSlotPropsValue,
...handlers,
...(!!className && { className }),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this part better perf wise? if so, the className line above could also be added in the same way, since it's pretty much the same kind of change

...defaultSlotProps,
...externalSlotProps,
...handlers,
...(!!className && { className }),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here too

...externalForwardedProps?.style,
...externalSlotProps?.style,
};
if (Object.keys(mergedStyle).length > 0) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if it's not true, we won't need to compute mergedStyle, right?

...externalForwardedProps?.style,
...externalSlotProps?.style,
};
if (Object.keys(mergedStyle).length > 0) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

@silviuaavram
Copy link
Member

Make sure to mark it as cherry pick if it's for v7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

internal Behind-the-scenes enhancement. Formerly called “core”. package: utils Specific to the utils package. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants