possible styled-component v4 performance issues?

I’m not sure what is going on, but just for the fact that I’m rendering 1000 boxes using styled components my screen takes almost a second to render, when using regular divs it takes less than 100ms.

Environment

System:

• OS: macOS 10.14.1
• CPU: (8) x64 Intel® Core™ i7-7820HQ CPU @ 2.90GHz
• Memory: 731.01 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 8.12.0 - /usr/local/bin/node
• Yarn: 1.10.1 - /usr/local/bin/yarn
• npm: 6.4.1 - /usr/local/bin/npm

npmPackages:

• babel-plugin-styled-components: ^1.6.4 => 1.8.0
• styled-components: ^4.0.0 => 4.0.3

Reproduction

https://codesandbox.io/s/xv1rz10p8q

Steps to reproduce

1. Open sandbox link
2. Notice that by default I’m not using styled components.
3. Click on “show boxes”
4. Notice that it is basically instant rendering (around 80ms)
5. Swap from App to App2 that uses styled-components
6. Notice that the rendering time now is not instant (around ~600ms)

The progression seems to be exponential. For example, 10000 boxes with styled-components takes 6 seconds, without 600ms.

Expected Behavior

I’m not sure if I’m doing something wrong, or if my expectations are wrong. But I’m hoping the performance will be similar.

Actual Behavior

The performance is quite different when including even a very simplistic styled-component div

[arianon]

@demian85 styled-components needs to consume the stylesheet instance to add a component’s styles to the stylesheet, and contexts are the canonical way to pass a global object (in this case the stylesheet) to React components.

Maybe in the future, when hooks are stable, Context.Consumers could be replaced by useContext, to avoid React tree pollution.

[mxstbr]

There’s probably not much we can do to fix that performance hit for the styled-components side unfortunately, it’s on the React team to improve it 😢