4 ms·

What is the performance penalty of using generated styles on every render? As far as I can see from the source code, React will have to modify `<style>` tag ev

What is the performance penalty of using generated styles on every render? As far as I can see from the source code, React will have to modify `<style>` tag every time a component is being rendered. I still think the best way to handle stylesheets is with external css file ( doesn't matter how it's generated. I use CSSModules ) and then add static class names for those components.

mxstbr 10y ago
We've tried styled-components in medium-size projects (50-500 components) and haven't noticed any performance-hit yet. That being said, it's definitely something we're conscious about. That's why we will be writing a babel transform that grabs all the _static_ styles and extracts them into a separate stylesheet! (just didn't have time to do it until ReactNL where I just announced it) See this issue for more information, and if anybody reading this has experience with babel transforms please holla since we can definitely use your help! https://github.com/styled-components/styled-components/issues/59 https://github.com/styled-components/styled-components/issue...
- onetom 10y ago
  You mean extract into a separate stylesheet file? Wouldn't that lead to https://en.wikipedia.org/wiki/Flash_of_unstyled_content https://en.wikipedia.org/wiki/Flash_of_unstyled_content issues? Maybe some memoization could help if there are performance issues with regenerating `document.styleSheets`...
bastawhiz 10y ago
Within React there are two approaches: 1. It uses the `style` prop, which modifies the CSSStyleDeclaration object on the DOM node. The style attribute gets set by the browser behind the scenes. [1] 2. The rendering happens on the server, and React produces the markup for the style attribute. [2] The former approach has very little overhead. The second bears the overhead of having to be parsed. In most libraries, this is what gets used. Some libraries try to be clever, though, and inject `<style>` or `<link>` elements into the DOM (mostly to support things like `:hover`). This can get extremely CPU intensive, though, and it's not uncommon to get burned by a library in this way. [1] https://github.com/facebook/react/blob/c78464f8ea9a5b00ec80252d20a71a1482210e57/src/renderers/dom/shared/CSSPropertyOperations.js#L194 https://github.com/facebook/react/blob/c78464f8ea9a5b00ec802... [2] https://github.com/facebook/react/blob/c78464f8ea9a5b00ec80252d20a71a1482210e57/src/renderers/dom/shared/CSSPropertyOperations.js#L167 https://github.com/facebook/react/blob/c78464f8ea9a5b00ec802...

mxstbr 10y ago

We've tried styled-components in medium-size projects (50-500 components) and haven't noticed any performance-hit yet. That being said, it's definitely something we're conscious about. That's why we will be writing a babel transform that grabs all the _static_ styles and extracts them into a separate stylesheet! (just didn't have time to do it until ReactNL where I just announced it) See this issue for more information, and if anybody reading this has experience with babel transforms please holla since we can definitely use your help! https://github.com/styled-components/styled-components/issues/59 https://github.com/styled-components/styled-components/issue...

onetom 10y ago
You mean extract into a separate stylesheet file? Wouldn't that lead to https://en.wikipedia.org/wiki/Flash_of_unstyled_content https://en.wikipedia.org/wiki/Flash_of_unstyled_content issues? Maybe some memoization could help if there are performance issues with regenerating `document.styleSheets`...

bastawhiz 10y ago

Within React there are two approaches: 1. It uses the `style` prop, which modifies the CSSStyleDeclaration object on the DOM node. The style attribute gets set by the browser behind the scenes. [1] 2. The rendering happens on the server, and React produces the markup for the style attribute. [2] The former approach has very little overhead. The second bears the overhead of having to be parsed. In most libraries, this is what gets used. Some libraries try to be clever, though, and inject `<style>` or `<link>` elements into the DOM (mostly to support things like `:hover`). This can get extremely CPU intensive, though, and it's not uncommon to get burned by a library in this way. [1] https://github.com/facebook/react/blob/c78464f8ea9a5b00ec80252d20a71a1482210e57/src/renderers/dom/shared/CSSPropertyOperations.js#L194 https://github.com/facebook/react/blob/c78464f8ea9a5b00ec802... [2] https://github.com/facebook/react/blob/c78464f8ea9a5b00ec80252d20a71a1482210e57/src/renderers/dom/shared/CSSPropertyOperations.js#L167 https://github.com/facebook/react/blob/c78464f8ea9a5b00ec802...