Performance rendering large form

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

For the application we are building a form is needed which consists of multiple table rows containing 10 form element per row (some checkboxes, some textfields, a autocomplete and a select). Unfortunately we appear to be running into some limitations from the MUI framework, in some cases 60 or more rows need to be rendered which can take up to a couple of seconds.

Expected behavior 🤔

Rendering the form elements should not take seconds

Steps to reproduce 🕹

I have created a sandbox simulating the issue we have, it consists of a MUI tabs component with 3 tabs. The first tab is empty, the second tab has plain html element which are rendered almost instantly and the third tab has been build using MUI form elements and takes a lot longer to render, freezing the UI during render.

https://codesandbox.io/s/mui-input-slow-render-w83j1?file=/src/App.js

Context 🔦

Are there any tips or tricks we can try/implement to improve the render performance from the MUI form elements?
Does MUI have an underlying performance issue which can be improved?

Your environment 🌎

System:
OS: macOS 12.0.1
Binaries:
Node: 16.0.0 - ~/.nvm/versions/node/v16.0.0/bin/node
Yarn: 1.22.15 - ~/.yarn/bin/yarn
npm: 7.10.0 - ~/.nvm/versions/node/v16.0.0/bin/npm
Browsers:
Chrome: 97.0.4692.71
Edge: Not Found
Firefox: Not Found
Safari: 15.1
npmPackages:
@emotion/react: ^11.4.1 => 11.5.0
@emotion/styled: ^11.3.0 => 11.3.0
@mui/core: 5.0.0-alpha.54
@mui/icons-material: ^5.0.3 => 5.1.0
@mui/lab: ^5.0.0-alpha.50 => 5.0.0-alpha.54
@mui/material: ^5.0.3 => 5.1.0
@mui/private-theming: 5.1.0
@mui/styled-engine: 5.1.0
@mui/system: 5.1.0
@mui/types: 7.1.0
@mui/utils: 5.1.0
@types/react: ^17.0.27 => 17.0.34
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.3.5 => 4.4.4

Start with the linked CodeSandbox, especially src/App.js, and profile the third tab against the plain HTML tab while rendering the reported 60 or more rows. Read the relevant MUI form-component entry points involved in the sandbox and determine whether the delay is reproducible as a framework issue. Done means a narrowed, reproducible cause with an agreed fix or documented guidance.