Large react app with styled components performance problems

Question

I'm a developer of a fairly large react application. A part of the application is a detail form that is loaded dynamically and can consist of about 100 input fields of different data types (different components). The initial render of this form takes about 500ms on my laptop and i'd like to make it faster. I'm not quite sure what causes this render time but i share with you what i have:

This is a screenshot of the react profiler. As you can see there are some commits happening but one (orange) stands out. This is where the actual form is rendered. The form is a hierarchy of composed layouting boxes, other containers and the field container with the label and the data-type component inside. A single component does not take too long to render, but added up is why I end up with 500ms.

if we take a closer look at a small part of this screenshot above we can see this:

This is a small section inside a date edit field that gets rendered because we have a field of data type date. The first element is a styled component

const StyledDateAbstractWrapper = styled.div`
  && {

    align-items: center;
    cursor: ${props => props.immutable ? 'not-allowed' : 'default'};
    display: flex;

    input {
      display: ${props => props.immutable ? 'none' : 'block'}

      &:last-of-type {
        display: ${props => props.immutable ? 'block' : 'none'}
      }
    }
  }
`

as you see, nothing fancy. But it takes 2.3ms to render. And inside a styled button that takes 5 ms. Let's say i have a couple of these and that's how i end up with 500ms.

At this point i really think styled-components is the problem because i have some components take a couple of milliseconds as expected and many many small styled-component wrappers that each take more than a millisecond.

So my question... is there something i can further investigate? Or are there clear no-goes for styled components that are rendered many times such as element selectors?

Im using styled-components 5.0.1

Another approach would be using something like https://github.com/bvaughn/react-window but i dont have a list really. more some composed components.

Providing a running application is a bit tricky at the moment.

thank you for any suggestions

JCQuintas JCQuintas · Accepted Answer · 2020-02-11T15:09:00

I can't say much without seeing the proper implementation on this case, but from what I can think of you have a few options.

1 - Instead of having components with display: none you can simply remove them from the DOM with { !immutable && <Component /> }, this way the component won't take space in the VirtualDOM

2 - Second problem could be the Form library you are using, here is a performance overview of some of them. Performance Comparison. Maybe changing the lib you are using also helps.

Large react app with styled components performance problems

2 Answers