Bad material-ui Box performance

[alexd16]

Seeing significant performance degradation when using Box components to style list item when iterating over arrays

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When rendering components that use a lot of Box components, I see a visible slowdown in the UI and stops interaction across other elements in the application, which doesn't happen with native components.

Expected Behavior 🤔

I should not see that much of a performance degradation for using the Box component

Steps to Reproduce 🕹

Here is a codesandbox sample that shows the issue: https://codesandbox.io/s/hidden-smoke-hdhe6

Steps:

1. Click 'Show Div List'
2. Data will show without any delay
3. Click 'clear'
4. Click 'Show Box List'
5. After a small delay the data shows

Looking at the performance tab on chrome, this is what I see:
Box List
Div List

To be honest I am not too familiar with the performance tab, so I am not sure if what I measured is relevant. But if I am looking at this correctly it seems to be more than 10x performance degradation.

Context 🔦

I have been having some performance issues in the project i've been working on, yesterday I tried to investigate why those issue where happening, and after digging a bit, it seems the reason why I am seeing bad performance across the application is because of our usage of the Box component

Given I didn't saw any warning in the docs I freely used the Box component across the application without expecting performance issues. A lot of styling in the application is done this way.

If this is something that can't be solved, and it's just the overhead that the Box component introduces, I think there should be a notice on the Box component component page so that people avoid this type of usage.

Your Environment 🌎

Tech	Version
Material-UI	v4.8.3
React	v16.13.1

[eps1lon]

Thanks for the report. A more useful comparison would be an existing Material-UI component e.g. Typography. Comparing against a simple <div> will obviously show worse performance.

[alexd16]

I guess that's fair, I'll make a comparison using Typography to see If I find the same issues.

I was using div directly just because that's exactly what the output of using the Box component would be.
I was expecting some overhead from using the Box component, just not that much.

Using a library like tailwindcss or tachyons I believe the performance would be similar to the one found in the div example. I understand these are completely different libraries on how they work, but in terms of the usage of the Box component, I see them more or less the same way.

I have updated the original codesandbox sample to show how the typography behaves. As far as I can tell, it also shows a noticeable performance degradation, but not as much as the Box version.

Performance profile from the performance tab:
Using Typgraphy: https://drive.google.com/file/d/14szDrfvs1VBHqnAXMb22gZjL9cxj7z4a/view?usp=sharing
Using Box: https://drive.google.com/file/d/1EOwf-mhBLDumlLpTJ9rAQyNTW0d1QB3P/view?usp=sharing

Those profiles represent clicking for the respective button 3 consecutive times. Let me know if you prefer a screenshot instead of the json files.

[eps1lon]

My point is that the benchmark isn't all that useful since you aren't using any features of the Box. I agree that this shouldn't create that much overhead but you're benchmarking the least used case. That isn't a fair comparison.

It's entirely possible that the Box is just as slow with actual props. But it would help us identifying the bottleneck in a real-world scenario. Then we can compare it to components that implement a similar interface.

From a quick glance I can already see that there's a big difference in style calculation. Something that shouldn't be there if these would actually produce the same output.

Currently you're comparing a 2020 smartphone to a 2000 mobile phone with regards to their battery lifetime. It's frustrating to read issues about "bad performance" if these attack the weakest argument for using a component.

[alexd16]

Ok, that's fair. I am sorry, I am not too used to looking into these issues. I thought it would be more helpful to give the simplest example that showed the issue.

In any case this is similar to what we are doing in the application currently: https://codesandbox.io/s/wonderful-http-x5l05?file=/src/Demo.js

Hope this is a better example to demonstrate the issue. As far as I can tell I am not doing anything special there, but there is a very noticeable delay when switching pages.

[oliviertassinari]

This thread makes me think of this tweet: https://twitter.com/jaredpalmer/status/1271482711132254210.

[ypresto]

Duplicate of #16704 ?

[alexd16]

I have been away over the last week so I didn't have the chance to look into this any further.

I did take a look at the issue referenced by @ypresto and it seems using styled-components could improve the performance I tried to replace the Box implementation from @material-ui/core with this:

import {
  spacing,
  shadows,
  borders,
  palette,
  sizing,
  display,
  flexbox,
  typography,
  positions
} from "@material-ui/system";
import styled from "styled-components";

export const Box = styled.div`${palette}${spacing}${typography}${shadows}${borders}${sizing}${display}${flexbox}${positions}`;

And in fact, just by replacing in a couple of components, the difference in performance was very noticeable. The big downside that I can see from doing this is that I can no longer reference the theme keys directly. I have to access the theme object with useTheme. Is there any way to get a round that issue?

Other than this is there other concerns that I might need to be aware using this version of the Box component? I read something on the docs about preferring to use jss to minimize bundle size. Should I expect a big impact on bundle size?

Thank you

[ypresto]

@alexd16

You can use material-ui theme in styled-components by passing mui's theme object to ThemeProvider of styled-components.
https://material-ui.com/guides/interoperability/#theme

To define theme type of styled-components in TypeScript use this:

import { Theme } from '@material-ui/core'
declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

Note: In TypeScript styled-components-based Box components will look like this:

import {
  borders,
  display,
  flexbox,
  grid,
  palette,
  positions,
  shadows,
  sizing,
  spacing,
  typography,
  PropsFor,
  ComposedStyleFunction,
} from '@material-ui/system'
import styled from 'styled-components'

// Borrowed from Box.d.ts
type BoxStyleFunction = ComposedStyleFunction<
  [
    typeof borders,
    typeof display,
    typeof flexbox,
    typeof grid,
    typeof palette,
    typeof positions,
    typeof shadows,
    typeof sizing,
    typeof spacing,
    typeof typography
  ]
>
type SystemProps = PropsFor<BoxStyleFunction>

export const Box = styled.div<
  SystemProps
>`${borders}${display}${flexbox}${grid}${palette}${positions}${shadows}${sizing}${spacing}${typography}`