Slow first render (generateAndInjectStyles)

Environment

System:

• OS: Windows 10
• CPU: x64 Intel® Core™ i5-7200U CPU @ 2.50GHz
• Memory: 1.13 GB / 7.86 GB

Binaries:

• Yarn: 1.7.0 - ~\AppData\Roaming\npm\yarn.CMD
• npm: 6.0.0 - C:\Program Files\nodejs\npm.CMD
• Watchman: 4.9.4 - C:\Tools\watchman\watchman.EXE

npmPackages

• babel-plugin-styled-components: 1.7.1
• styled-components: 4.0.0

Reproduction

The project consists of multiple React root nodes that get rendered server side then hydrated on the client side. For each of the root node, a style tag and markup is outputed on the server side.

After the page is loaded and hydrated on the client, the very first interaction with a react component is very slow (~1s). Further analysis indicates that the function generateAndInjectStyles is the one causing the issue. Here is a brief set of results from the performance analysis:

• generateAndInjectStyles (@styled-components.browser.esm.js:2025): 805.98ms total time - 0 self time
• generateAndInjectStyles (@styled-components.browser.esm.js:1443): 805.98ms total time - 0.29ms self time
• inject (@styled-components.browser.esm.js:1080) - 795.61ms total time - 0.38ms self time
• insertRules (@styled-components.browser.esm.js:812) - 795.23ms total time - 0ms self time

Expected Behavior

Either have this run more smoothly or have an option to run the style injection async on DOM ready (or manually).

[robertontiu]

@probablyup I did some extra profiling on the matter.

First of all, having one root node doesn’t fix the issue. The function (generateAndInjectStyles) still gets called on first re-render and takes about 1s. Further calls to this function are very fast. I assume styled-components attempts to do this for all the React tree the first time the reason for it being so slow.

Secondly, I have actually found a temporary workaround:

import * as React from 'react'
import styled, {css} from 'styled-components'

interface FixLagState {
	ready: boolean
}

const Wrapper = styled.div`
	display: none;
	${(props: FixLagState) => props.ready && css`
		opacity: 0;
	`} 
`

export default class FixLag extends React.Component<{}, FixLagState> {
	state = {
		ready: false
	}

	render() {
		return <Wrapper {...this.state}/>
	}

	componentDidMount() {
		this.setState({ready: true})
	}
}

Apparently having this component rendered triggers styled-components in the backround temporarily fixing our issue. It also appears the function takes a lot less since it only has to deal with the styles of this component (being rendered first in the DOM).

[robertontiu]

@probablyup Hey. The repo is private so we cannot share that. Also, the codebase is quite complex so we can’t make a env sample either.