Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Flatten function performance issue v4

See original GitHub issue

Having recently tried to upgrade our styled-components from v3 to v4 in a relatively large react app - we’ve ran into a strange performance issue that seems to be tied to the flatten function. When commenting out this part of flatten, the issue seems to resolve:

https://github.com/styled-components/styled-components/blob/9b81695d35074974c42b943a82456c9ae4b42500/packages/styled-components/src/utils/flatten.js#L59-L72

Here are screenshots of performance snapshots run with chrome dev tools when performing the same action in our app on v3 vs. v4:

v3 screen shot 2019-03-04 at 11 06 48 am

v4 screen shot 2019-03-04 at 10 59 45 am

Strangely, we have not been able to reproduce this in a clean slate react app.

Environment

System:

OS: macOS High Sierra 10.13.6
CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz
Memory: 2.29 GB / 16.00 GB
Shell: 5.3 - /bin/zsh

Binaries:

Node: 8.14.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm

npmPackages:

babel-plugin-styled-components: ^1.4.0 => 1.10.0
styled-components: ^4.1.3 => 4.1.3

Reproduction

Unable to reproduce with a basic react app created via create-react-app.

Expected Behavior

Performance is as good if not better than v3.

Actual Behavior

Performance is sluggish, significantly slower than v3.

Issue Analytics

State:
Created 5 years ago
Reactions:6
Comments:11 (6 by maintainers)

Top GitHub Comments

3reactions

ghostcommented, Mar 5, 2019

@probablyup Yup that fixes it.

Here’s what it looks like when performing the same action (left = styled-components@4.1.4-alpha.6 and right = 4.1.3): screen shot 2019-03-05 at 1 29 34 pm

@alansouzati Thanks for fixing this!

2reactions

probablyupcommented, Mar 4, 2019

You can trigger that code path by passing a non-styled component SFC into a style interpolation.

Top Results From Across the Web

6 different array flattening methods in JavaScript, performance ...

I have done a performance testing for each of the implementations that will follow. function generateNestedArray(itemsPerLevel, levelsCount) ...

Is js native array.flat slow for depth=1? - Stack Overflow

This gist is a small benchmark I wrote comparing the performance for 4 alternatives for flattening arrays of depth=1 in JS (the code...

Optimize Lateral Flatten Performance - Snowflake Community

I'm running a Snowpipe that is continuously landing JSON into a staging table, which is then flattened into numerous target tables. The catch ......

Custom flatten version is faster than `flatten()` - Julia Discourse

I have two ways to “flatten” this array: function naive_flatten(a) ret = Array{Float64}(undef, 0) @inbounds for i=1:length(a) append!(…

flatten | MuleSoft Documentation

This example defines three arrays of numbers, creates another array containing those three arrays, and then uses the flatten function to convert the...