Low mount/unmount performance of MUI components

[mohsinulhaq]

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/hopeful-breeze-x1zsx4?file=/src/App.js The MUI components used in the form are immaterial as the performance keeps degrading as you start adding more and more components. And begins to improve as I remove those components.

Steps:

1. Click on Add button multiple times quickly to clone the form.
2. You would notice that after adding only a few forms, the lag is very noticeable.
3. Same when trying to remove the forms.

Current behavior 😯

The mount/unmount is extremely slow.

Expected behavior 🤔

The operations should be smooth.

Context 🔦

We had recently migrated this form cloning thing from react-bootstrap and started noticing the lag. With react-bootstrap, using roughly the exact component equivalents result in much more snappier experience when mounting and unmounting the forms. Here's the codesandbox for the same: https://codesandbox.io/s/vigilant-andras-djrwus?file=/src/App.js

Your environment 🌎

npx @mui/envinfo

``` System: OS: Linux 3.10 Binaries: Node: 16.18.1 Yarn: 1.22.11 npm: 7.23.0 Browsers: Chrome: 108.0.5359.125 Firefox: 102.6.0esr npmPackages: @emotion/react: ^11.9.3 => 11.10.4 @emotion/styled: ^11.9.3 => 11.10.4 @mui/base: 5.0.0-alpha.84 => 5.0.0-alpha.84 @mui/icons-material: ^5.8.4 => 5.10.6 @mui/lab: 5.0.0-alpha.87 => 5.0.0-alpha.87 @mui/material: ^5.8.5 => 5.10.8 @types/react: ^17.0.6 => 17.0.50 react: ^17.0.0 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 ```

Please note that above package details are from my local setup. The codesandbox uses the latest of everything while still having the issue.

[mohsinulhaq]

@michaldudak the issue is not particularly about FormControl, I’m calling it form cloning because of our internal terminology. But it’s really a general performance issue that scales with the number of MUI components used to mount at once.

[michaldudak]

Note that Material UI components are richer and offer more functionality compared to react-bootstrap. It does come with a cost, though. React-bootstrap components are also re-rendered every time a new one is added, but their render tree is much shallower compared to ours:

React-Bootstrap:

Material UI:

You may make this issue less noticeable by memoizing the components so only the newly added one is rendered: https://codesandbox.io/s/currying-frost-0rt7bm?file=/src/App.js

Alternatively (or additionally), you may look into our unstyled components: https://mui.com/base/getting-started/overview/. They can offer better performance but you have to provide your own styles.

[mohsinulhaq]

Thanks for the help @michaldudak That memoized implementation definitely helped to some extent Unstyled is really not an option for us at this moment, so I guess we will have to live with this.

[Eslam3bed]

@michaldudak that's true, but it also means this library will only be used for simple light applications, and I'm afraid I have to disagree with making rich components should mean sacrificing the performance, besides the added complexity of memorizing and handling the coming performance issues, match it a hard to adopt.

I have noticed a bunch of recent tickets related to performance issues, so it should be sth that got introduced recently maybe!