Open mohsinulhaq opened 1 year ago
@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.
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.
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.
@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!
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:
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. Withreact-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.jsYour environment ๐
``` 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 ```npx @mui/envinfo
Please note that above package details are from my local setup. The codesandbox uses the latest of everything while still having the issue.