{"action":"created","issue":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/10778","repository_url":"https://api.github.com/repos/mui-org/material-ui","labels_url":"https://api.github.com/repos/mui-org/material-ui/issues/10778/labels{/name}","comments_url":"https://api.github.com/repos/mui-org/material-ui/issues/10778/comments","events_url":"https://api.github.com/repos/mui-org/material-ui/issues/10778/events","html_url":"https://github.com/mui-org/material-ui/issues/10778","id":308039162,"node_id":"MDU6SXNzdWUzMDgwMzkxNjI=","number":10778,"title":"Improve Material-UI performance","user":{"login":"Bessonov","id":182451,"node_id":"MDQ6VXNlcjE4MjQ1MQ==","avatar_url":"https://avatars0.githubusercontent.com/u/182451?v=4","gravatar_id":"","url":"https://api.github.com/users/Bessonov","html_url":"https://github.com/Bessonov","followers_url":"https://api.github.com/users/Bessonov/followers","following_url":"https://api.github.com/users/Bessonov/following{/other_user}","gists_url":"https://api.github.com/users/Bessonov/gists{/gist_id}","starred_url":"https://api.github.com/users/Bessonov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Bessonov/subscriptions","organizations_url":"https://api.github.com/users/Bessonov/orgs","repos_url":"https://api.github.com/users/Bessonov/repos","events_url":"https://api.github.com/users/Bessonov/events{/privacy}","received_events_url":"https://api.github.com/users/Bessonov/received_events","type":"User","site_admin":false},"labels":[{"id":299360691,"node_id":"MDU6TGFiZWwyOTkzNjA2OTE=","url":"https://api.github.com/repos/mui-org/material-ui/labels/discussion","name":"discussion","color":"bfdadc","default":false},{"id":297114765,"node_id":"MDU6TGFiZWwyOTcxMTQ3NjU=","url":"https://api.github.com/repos/mui-org/material-ui/labels/performance","name":"performance","color":"f9d0c4","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":57,"created_at":"2018-03-23T13:57:45Z","updated_at":"2018-12-20T21:12:49Z","closed_at":null,"author_association":"NONE","body":"First, thank you very much for this awesome component library! It's great!\r\n\r\nI added a drawer in my new app. Mostly, I copypasted drawer example. Just for PoC I multiplied\r\n\r\n```\r\n        <Divider />\r\n        <List>{mailFolderListItems}</List>\r\n```\r\n\r\nsection.\r\n\r\nAfter that it feels very slow, especially on mobile device (nexus 4, cordova with crosswalk 20). I use dev mode, but prod mode doesn't speed up much.\r\n\r\nThrough react dev tools I noticed that components in mailFolderListItems rendered on every link click in react-router or even menu open. It takes sometime up to 50-60ms to rerender ONE `{mailFolderListItems}`. I use\r\n\r\n```\r\nconst modalProps = {\r\n\tkeepMounted: true, // Better open performance on mobile.\r\n};\r\n```\r\n\r\nTo eliminate uncertainty with other app components, I converted `mailFolderListItems` to Component and disable rerendering:\r\n\r\n```\r\nclass MailFolderListItems extends React.Component<{}, {}> {\r\n\r\n\tshouldComponentUpdate() {\r\n\t\treturn false;\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<List>\r\n\t\t\t\t<Link to={Routes.Startpage.path}>\r\n\t\t\t\t\t<ListItem>\r\n\t\t\t\t\t\t<ListItemIcon>\r\n\t\t\t\t\t\t\t<InboxIcon />\r\n\t\t\t\t\t\t</ListItemIcon>\r\n[...]\r\n\r\n\r\n\t\t\t\t<Divider />\r\n\t\t\t\t<MailFolderListItems />\r\n```\r\n\r\n\r\nAfter that this part feels OK.\r\n\r\nI found https://github.com/mui-org/material-ui/issues/5628 . [I suggest to revisit it](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation). Optimizing `shouldComponentUpdate` is fundamental and most important step to gain performance. `PureComponent` is just most common shortcut.\r\n\r\nFurthermore, I noticed that very much time (1-2ms and more for EVERY material-ui component) is spended in `WithStyles`.\r\n\r\n- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.\r\n\r\n## Expected Behavior\r\nI'm expecting to get most of possible react performance for this great library.\r\n\r\n## Current Behavior\r\nThe app get slower with every material-ui component.\r\n\r\n## Steps to Reproduce (for bugs)\r\nI don't provide reproducing example yet, because I just copypasted from component demo page, but if needed I can provide codesandbox demo. For browser it's noticeable, if browser slowed down by factor >=5x in performance setting.\r\n\r\n## Your Environment\r\n\r\n| Tech         | Version |\r\n|--------------|---------|\r\n| Material-UI  |  1.0.0-beta.38  |\r\n| Material-UI Icons |  1.0.0-beta.36  |\r\n| React        |  16.2.0 |\r\n| browser      |  cordova crosswalk 20 (equals android chrome 50) |\r\n"},"comment":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/comments/449137005","html_url":"https://github.com/mui-org/material-ui/issues/10778#issuecomment-449137005","issue_url":"https://api.github.com/repos/mui-org/material-ui/issues/10778","id":449137005,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0OTEzNzAwNQ==","user":{"login":"prevostc","id":998369,"node_id":"MDQ6VXNlcjk5ODM2OQ==","avatar_url":"https://avatars2.githubusercontent.com/u/998369?v=4","gravatar_id":"","url":"https://api.github.com/users/prevostc","html_url":"https://github.com/prevostc","followers_url":"https://api.github.com/users/prevostc/followers","following_url":"https://api.github.com/users/prevostc/following{/other_user}","gists_url":"https://api.github.com/users/prevostc/gists{/gist_id}","starred_url":"https://api.github.com/users/prevostc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/prevostc/subscriptions","organizations_url":"https://api.github.com/users/prevostc/orgs","repos_url":"https://api.github.com/users/prevostc/repos","events_url":"https://api.github.com/users/prevostc/events{/privacy}","received_events_url":"https://api.github.com/users/prevostc/received_events","type":"User","site_admin":false},"created_at":"2018-12-20T21:12:49Z","updated_at":"2018-12-20T21:12:49Z","author_association":"NONE","body":"@oliviertassinari @kof @dantman \r\n Here is a codesandbox reproduction of my performance issue: https://codesandbox.io/s/yvv2y2zxxx\r\n\r\nIt is a form with ~20 fields (not uncommon) you will experience some lag on user input. On slower devices, this form is just not usable.\r\n\r\nThe performance issue comes from the massive re-render on user input, but wrapping MUI components in a pure component (React.memo) does nothing as everything here has children and children this will force re-rendering AFAIK (source: https://reactjs.org/docs/react-api.html#reactpurecomponent)\r\n\r\nBelow are some screenshots of my manual benchmark, one without any optimisation, one with everything memoized and one using a custom input component with a local state to avoid setting the state on whole form too often. \r\nOn each configuration, a user input reconciliation takes around 60ms (way above the 16ms I need to render at 60fps.\r\n\r\nPlease note that I would gladly learn that I did something wrong because I love MUI and I would be sad if there was not an easy fix <3 \r\n\r\n@dantman How can you write an `ExpansionPanel` that do not take any `React.ReactNode` as input (children or props)? If you mean that I should write a specific component for every panel in my app, this is not possible unfortunately, I have too many of them. \r\n\r\n<img width=\"1379\" alt=\"screenshot 2018-12-20 at 22 04 08\" src=\"https://user-images.githubusercontent.com/998369/50310768-5a240080-04a3-11e9-872b-121e968b1248.png\">\r\n\r\n<img width=\"1413\" alt=\"screenshot 2018-12-20 at 21 56 57\" src=\"https://user-images.githubusercontent.com/998369/50310679-00bbd180-04a3-11e9-9573-9d53e79ed5aa.png\">\r\n\r\n<img width=\"1255\" alt=\"screenshot 2018-12-20 at 22 05 00\" src=\"https://user-images.githubusercontent.com/998369/50310846-93f50700-04a3-11e9-8e60-08d3feaa06f5.png\">\r\n"}}
{"actor":{"display_login":"prevostc"}}