[material-ui] Deprecate *Component and *Props props

[DiegoAndai]

Part of #40417

Description

Deprecate *Component and *Props props in v6, planned for removal in v7.

• These are deprecated in favor of the slot pattern: slots and slotProps
• If the slots or slotProps props do not exist:
  • They must be implemented in the same PR in which the deprecation is added
  • They should have the same type as the deprecated prop
• The PR introducing the deprecation must also add:
  • A section in the migration guide
  • A codemod

Example PR

• [material-ui][Accordion] Deprecate *Props props and classes for v6 #40418

Contributing

Feel free to take any components that still need to be done or in progress. Please mention this issue in your PR so we can link it in the description and keep it up to date.

Components to migrate

ordered by page views

• InputBase [material-ui][InputBase] Deprecate components and componentProps props for v6 #42093
• Input
• FilledInput
• OutlinedInput
• ButtonBase
• Select @siriwatknp (the current implementation does not allow to pass slots, slotProps to the SelectInput)
• NativeSelect @siriwatknp (the current implementation does not allow to pass slots, slotProps to the SelectInput)
• Autocomplete: #41875
• TablePagination: [TablePagination] Add the rest of slots and slotProps. #44570 @siriwatknp
• TableSortLabel: [material-ui][TableSortLabel] Add slots and slotProps #44728
• CardHeader [CardHeader] Deprecate *TypographyProps and complete slots, slotProps #44729
• Alert [material-ui][Alert] complete slots and slotProps #44971
• ListItemText: #44571
• Dialog: [material-ui][Dialog] Add slots and slotProps #44792 (Deprecation of PaperComponent is pending)
• Tooltip: [Tooltip] Deprecate *Component and *Props for v6 #44350
• Accordion: #40418
• Avatar: #40853
• Backdrop: #40677
• Modal: [material-ui][Modal] Add migration guide and codemod for deprecated props #45021
• SpeedDial: #40698
• StepLabel: #41835
• StepContent: #44742
• TextField: #42062
• Popover [material-ui][Popover] Deprecate *Props and complete slots, slotProps #45035
• SwitchBase (to unblock Checkbox and Radio) [material-ui][SwitchBase] Deprecate inputProps and complete slots, slotProps #45076
• Tabs [material-ui][Tabs] Deprecate *Props and complete slots, slotProps #45012
• Drawer [material-ui][Drawer] Deprecate *Props and complete slots, slotProps #44960
• SwipeableDrawer [material-ui][Drawer] Deprecate *Props and complete slots, slotProps #44960
• ListItem: [material-ui][ListItem] Add codemod for deprecated props #45022 (Deprecation of secondaryAction is pending)
• Checkbox [material-ui][Checkbox] Add slots and slotProps #44974
• MobileStepper [material-ui][MobileStepper] deprecate LinearProgressProps and complete slots, slotProps #45033
• Radio [material-ui][Radio] Add slots and slotProps #44972
• Menu: [Menu] Deprecate *Props and complete slots, slotProps #44913
• Rating
• Snackbar #42314
• SpeedDialAction [material-ui][SpeedDialAction] Add slots and slotProps #45065

Additional tasks

• Measure useSlot's impact on component performance - @siriwatknp
  Summary: no different, see the benchmark details
• Duplicate the doc to Material UI - @siriwatknp
• Replace the use of *Component and *Props internally, for example: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Autocomplete/Autocomplete.js#L688

Search keywords: deprecation material-ui

[harry-whorlow]

@DiegoAndai Hi man, hope all is well!

Can you mark speed dial as under way 40698. I'll be adding to it over the coming weeks 🤟

[DiegoAndai]

@harry-whorlow done 🙌🏼

[DiegoAndai]

Utils for the codemods of these deprecations were added in #41685. This makes implementing the codemods easier.

[harry-whorlow]

@DiegoAndai I think I'll take up menu next, I'll create a pull request in the coming days. 🤟

[harry-whorlow]

My draft for menu, if you could mark menu as 'in progress' that would be awesome. 🤟

[DiegoAndai]

Hey everyone! With the core team, we've been discussing that composition might be a better API than slots for these props' use cases. It hasn't been decided yet if we will take this approach, but until we have more clarity, I'm marking this issue as on hold.

For v6, we should revert the deprecation messages we've added. Is someone here interested in opening a PR for that? It should only revert the deprecation messages, not the code itself.

Note that #41279 is not on hold. We will continue with that one, as having two names for the same thing (components and slots) doesn't make sense.

I'm sorry if you had open PRs and this disappoints you 😓 but we should strive for the best API 🙌🏼 🚀. For the moment, let's close open PRs. I'll keep you updated.

[lhilgert9]

For v6, we should revert the deprecation messages we've added. Is someone here interested in opening a PR for that? It should only revert the deprecation messages, not the code itself.

@DiegoAndai I could do this.

[harry-whorlow]

Morning if it's okay with you guys I'll pick up the Modal: missing migration guide and codemod ticket to get back up to speed. 🤟

[edit]: I think the checklist needs to be updated, as it appears the codemod and docs are there.

If were moving with this again then I'll pick up Radio and give it a go.

[alexey-kozlenkov]

@DiegoAndai greetings! I see there are more tickets being linked to this one lately. Perhaps this current issue has been given any more thoughts from the core team and there is some decision now (together with #37585) ?

[DiegoAndai]

@siriwatknp given @oliviertassinari's performance concerns, I added a task to this issue to measure useSlot's impact on performance. May I ask you to prioritize measuring it and see if we need to take action? Ideally, we should measure all components, but if not possible, let's prioritize by usage.

[siriwatknp]

Based on the benchmark (in ms) using CardHeader comparison between 6.3.0 vs 6.4.0 (using useSlot):

For CardHeader, the useSlot increase the time to render ~0.2-0.3ms per instance.

Below is the details of the benchmark:

row: number of instances
column: Material UI version

normal	6.3.0	6.4.0	diff	diff(%)
100	17.59	20.7	3.11	17.68%
1000	187.87	216.37	28.5	15.17%

x6 slowdown	6.3.0	6.4.0	diff	diff(%)
100	108.66	129.31	20.65	19.00%
1000	1127.56	1344.11	216.55	19.21%

Benchmark is done on Apple M3 Pro

I'd say this is acceptable for v7. What's your thought @DiegoAndai cc @mnajdova

[DiegoAndai]

@siriwatknp a couple more things I think we should try:

• The CardHeader has six slots. May I ask you to test with components that have fewer slots so we can understand how the amount of useSlot hooks used impacts these metrics? Testing with a component with 2 slots and one with 4 slots would be ideal.
• The Slider uses useSlotProps instead of useSlot. May I ask you to compare its performance if we use useSlot? useSlotProps seems to be a simpler implementation of the hook, so I would like to understand if their performance is different as well.
• May I ask you to spend some time digging into useSlot to understand if we can optimize anything to reduce this 15-20% difference we see in the test above?

[siriwatknp]

@DiegoAndai Yes, I'm benchmarking some more components.

[siriwatknp]

@DiegoAndai I was wrong. The performance difference of the previous benchmark comes from the IconButton, not the CardHeader. In the previous benchmark, I use this markup:

<CardHeader
  key={i}
  avatar={<Avatar aria-label="recipe">R</Avatar>}
  action={
    <IconButton aria-label="settings">
      <MoreVertIcon />
    </IconButton>
  }
  title="Shrimp and Chorizo Paella"
  subheader="September 14, 2016"
/>

After I replace Avatar and IconButton with div and button, the performance has no difference between 6.3.0 and 6.4.0.
Here is a new benchmark (time to render in ms using 1000 instances of CardHeader).

	v6.3.0	v6.4.0	diff	diff(%)
normal	152.72	148.36	-4.36	-2.85%
with avatar	177.68	180.21	2.53	1.42%
with avatar + button	212.29	209.21	-3.08	-1.45%

As you can see, I split them into 3 scenarios:

1. CardHeader with title and subheader props
2. CardHeader with title and subheader props + avatar prop
3. CardHeader with title and subheader props + avatar prop + action prop

CardHeader has 6 slots and there is no difference in performance. I think the migration is safe to do.

---

More details on the IconButton, in v6.4.0 the loading is introduced but not optimized (render extra element even loading is false). I will create a separate PR to optimized this using the similar approach I did to Button.

[harry-whorlow]

@DiegoAndai if this task is moving again, can my #42218 be reopened?

[edit] ah, I see its already been done in #44913, if its cool with you guys I'll pick up snack bar then

[DiegoAndai]

@harry-whorlow please go ahead. Let us know when you open a PR.

cc: @siriwatknp

[DiegoAndai]

@siriwatknp just a heads up: I added a task to check before closing this issue:
Replace the use of *Component and *Props internally, for example: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Autocomplete/Autocomplete.js#L688