Emotion: Styles are not being removed from DOM after component unmount

[arsen]

I was wondering what is the reason to keep styles in the DOM after the component is being unmounted? Shouldn't it remove the styles when the component is no longer mounted?

[mitchellhamilton]

emotion is built around a function that returns a class name so it has no knowledge of whether or not it's being used. Keeping all the rules also means we can heavily cache rules. Is there a reason to not keep them?

[probablyup]

Some browsers (old-ish IE) have rules about the maximum number of stylesheets and/or styles you can have at once. https://stackoverflow.com/a/9906889

[arsen]

Let's say I have a newsfeed with infinite scrolling and items in feed might have different styling, it will end up adding style tag for each element from the feed, even if I implement the logic to remove unused elements it will still keep style tags in the header.

I don't know if it will be a huge performance hit on the browser's rendering but still it kind of bugs me that there is a garbage in HTML header.

I will love to hear from others, on what they think about this.

[mitchellhamilton]

@arsen There will only be many style tags in development, in production we use one style tag per 65000 rules.

[arsen]

That is actually super cool @mitchellhamilton :)
What do you think of having too many CSS rules in a style element, will it affect a performance? have you guys done any performance tests on that?

[mitchellhamilton]

It won't, it's been discussed in the past with glamor but it was found out that it didn't cause any problems and no one has ever reported it causing a problem.

[mitchellhamilton]

Also, if you want to try for yourself, run this in your browser's DevTools. It'll insert 50,000 rules which is likely significantly highly than will be inserted in a normal app.

var style = document.createElement('style')

document.head.appendChild(style)

var num = 50000

while (num--) {
  style.sheet.insertRule('body {background-color: hotpink;}', style.sheet.cssRules.length)
}

[tkh44]

I'm going to close this because the performance is fine in prod mode.

[Abolfazl2647]

you can use lib like this.
https://www.styled-components.com/

[Andarist]

AFAIK styled-components doesn't remove "unused" styled from the DOM either.

[pradeepbarik]

i had same also issue then i loaded components using react lazy load then this issue is solved for me

[FezVrasta]

The only issue I have with this is if during development I comment out a rule, because the duplicate styles are going to take over so I end up having to comment out the same rule several times. I'm not sure if what I'm saying is clear

[y1n0]

Performance aside, this is causing newly mounted components to use old styles from the previously unmounted component.

I have a component that receives a style object as prop. In this style objects I target the first n children of the component with :nth-child() and apply a specific style to them. When I navigate to a different page which uses the same component (with different data, and no style prop), the style from the old page is still applied, although it is not passed in props to the component this time.

[Andarist]

Could you share a repro case so I could understand your issue better?

[y1n0]

Nevermind, I found that my component merges the styles it receives with a global style object thus they get applied to all component of the same type.
Thank you