Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TextField] significant performance drop (x10 times slower) when rendering a TextField #34436

Closed
2 tasks done
ZFail opened this issue Sep 22, 2022 · 3 comments
Closed
2 tasks done

[TextField] significant performance drop (x10 times slower) when rendering a TextField #34436

ZFail opened this issue Sep 22, 2022 · 3 comments
Labels
component: text field This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation performance support: question Community support but can be turned into an improvement

Comments

@ZFail
Copy link

ZFail commented Sep 22, 2022

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

two samples (v4 and v5) identical and render 3000 TextFields
Steps:

  1. open v5 version https://codesandbox.io/s/mui-v5-perf-pk1h1h
  2. press reload button -> render takes 20s
  3. open v4 version https://codesandbox.io/s/mui-v4-perf-x8v9ew
  4. press reload button -> render takes 2s

Current behavior 😯

render takes 20 seconds

Expected behavior 🤔

rendering should be 2 seconds

Context 🔦

even a small number of text fields noticeably slows down page rendering

Your environment 🌎

No response
@ZFail ZFail added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 22, 2022
@mnajdova
Copy link
Member

You can use the disableInjectingGlobalStyles option in the InputBase in scenarios like this, with the downside that you would need to add the global styles for the auto-fill keyframe yourself at the top of your app. See https://codesandbox.io/s/mui-v5-perf-forked-ogd8ks?file=/src/App.tsx

It's the second time we see an issue like this, so maybe it is worth adding a perf example on the Text Field page.

@mnajdova mnajdova added performance support: question Community support but can be turned into an improvement component: text field This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 23, 2022
@mnajdova mnajdova assigned mnajdova and unassigned mnajdova Sep 26, 2022
@mnajdova mnajdova added the docs Improvements or additions to the documentation label Sep 27, 2022
flomillot added a commit to gridsuite/gridstudy-app that referenced this issue Feb 22, 2023
@flomillot
New tap changer table for two windings transformer (#1091)
0c033da 
Change the tap changer table inside the two windings transformer creation dialog and create a reusable drag and drop table.
Mutualize the code between ratio tap changer and phase tap changer.
Increase the rendering speed of TableNumericalInput : mui/material-ui#34436
Reorganize code and do some refactoring.

Signed-off-by: Florent MILLOT <[email protected]>
@pantelispanayiotou
Copy link

pantelispanayiotou commented Mar 6, 2023 •
edited
Loading

what is the cause of the issue? I am also having the same issue and slows the render of the whole component and i am just rendering one TextField. When i use disableInjectingGlobalStyles its fine. Also can someone explain what is the auto-fill keyframe? @mnajdova

@mj12albert mj12albert changed the title significant performance drop (x10 times slower) when rendering a TextField [TextField] significant performance drop (x10 times slower) when rendering a TextField Oct 27, 2023
@mj12albert
Copy link
Member

Also can someone explain what is the auto-fill keyframe?

See this issue! #29213

@mj12albert mj12albert mentioned this issue Oct 31, 2023
Closed
@SWICRIOT SWICRIOT mentioned this issue Oct 24, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: text field This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation performance support: question Community support but can be turned into an improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mnajdova @mj12albert @ZFail @pantelispanayiotou