Скрытая цена CSS-in-JS-библиотек в React-приложениях

[Carduelis]

Очень подробная статья.
Могу добавить, что styled-components пятой версии теперь не имеют огромного количество Consumers. Да и в целом, производительность возросла: что первоначальный рендеринг, что повторный (при изменении props).
Из перевода:

Например, стилизованный компонент TagLine выглядит в React DevTools до изменений (v4):

<TagLine>
<StyledComponent forwardedRef={null}>
<Context.Consumer>
<Context.Consumer>
<h2 className=”H2-sc-1izft7s-7”>Hello world</h2>
</Context.Consumer>
</Context.Consumer>
</StyledComponent>
</TagLine>

А вот так — после изменений (v5)

<TagLine>
<h2 className=”H2-sc-1izft7s-7”>Hello world</h2>
</TagLine>

[twolegs]

Фактически, консьюмеров так же остается огромное количество. Просто вместо компоненты-консюмера будет хук useContext(), который в дереве девтулз не отображается.
Да, дерево выглядит лучше, но это не отменяет того, что все styled-компоненты будут реагировать на изменение контекста.

[justboris]

А если контекст не менять — то реагировать будет не на что

[OlegDutchenko]

CSS-in-JS это не только StyledComponents!
Если кто не в курсе — cssinjs.org

[gromov_io]

Особенно стоит задуматься когда вы делаете SSR:
— Сколько вы потеряете на TTFB при рендере компонента в строку.
— Как вы будете обходится без кеширования? и готовы ли вы платить за это увеличеными таймингами TTFB и количеством отдаваемого трафика на % гараздо больше из-за стилей.