Announcing styled-components v5: Beast Mode πŸ’ͺπŸ”₯

50% faster server-side rendering, 22% faster client-side rendering, 31% smaller bundle size, RTL support and no breaking changes! πŸ˜πŸ’―πŸŽ‰πŸ’…

npm install styled-components@^5.0.0

Fast, faster, styled-components πŸŽπŸ’¨

  • 26% smaller bundle size (16.2kB vs. 12.42kB min+gzip) ⚑️
  • 22% faster client-side mounting 😱
  • 26% faster updating of dynamic styles πŸ’―
  • 45% (!!!) faster server-side rendering πŸ”₯πŸ”₯πŸ”₯
Mounting a deep component tree benchmark. Lower is better.

Clean, cleaner, React DevTools ✨

<TagLine>
<StyledComponent forwardedRef={null}>
<Context.Consumer>
<Context.Consumer>
<h2 className=”H2-sc-1izft7s-7”>Hello world</h2>
</Context.Consumer>
</Context.Consumer>
</StyledComponent>
</TagLine>
<TagLine>
<h2 className=”H2-sc-1izft7s-7”>Hello world</h2>
</TagLine>
React DevTools component tree output for styled-components.com. Left: styled-components v4, Right: styled-components v5

New, newer, StyleSheetManager 🧩

RTL support 🌏

import { StyleSheetManager } from 'styled-components';
import stylisRTLPlugin from 'stylis-plugin-rtl';
<StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
<App />
</StyleSheetManager>

Support us πŸ™

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store