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! πŸ˜πŸ’―πŸŽ‰πŸ’…

Jun 14 Β· 4 min read

We are very excited to announce that the styled-components v5 beta is here! There are no breaking changes, as long as your app is running the latest version of React, styled-components v5 should just work. ✨

Please try the beta in your apps and let us know if you encounter any issues:

npm install styled-components@beta

Note that you need to be on a react version that supports hooks, e.g.
react@^16.8 react-dom@^16.8 react-is@^16.8

Let’s talk about the changes!

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

Back when we released v2 more than two years ago we promised to focus on performance. We have since delivered with massive speedups in various releases, including a massive 10x performance boost in v3.1 and another 25% boost in v4.

styled-components v5 smashes it out of the park once again! Compared to v4, it comes with:

  • 31% smaller bundle size (16.2kB vs. 12.33kB min+gzip) ⚑️
  • 22% faster client-side mounting 😱
  • 26% faster updating of dynamic styles πŸ’―
  • 45% (!!!) faster server-side rendering πŸ”₯πŸ”₯πŸ”₯

styled-components was already one of the fastest CSS-in-JS libraries out there, but with this v5 update we solidified our position ahead of the pack:

Mounting a deep component tree benchmark. Lower is better.

These massive speed gains were mainly enabled by our new core stylesheet engine. It had not been touched in years, so we completely rebuilt it with a focus on performance and correctness.

While we have extensively tested it, there might be subtle edge-case bugs lurking in the rewrite, so we need you to test the v5 beta to make sure everything is as solid as can be.

Please try the beta version in your apps and let us know if you encounter any issues:

npm install styled-components@beta

If you use jest-styled-components, make sure to update to the beta of that as well!

Clean, cleaner, React DevTools ✨

All of your styled components are now fully hooks-powered, so there is significantly less component nesting and much cleaner React DevTools when using styled-components! 🎣

Here is what our styled TagLine component looks like in the React DevTools when using v4:

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

Here is what the same styled component looks like in the React DevTools when using v5:

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

How clean is that?!?! 😍 Let’s look at a real-world example:

React DevTools component tree output for styled-components.com. Left: styled-components v4, Right: styled-components v5

Wow. 😍😍😍

Huge shoutout to to Jessica Franco and Alexander Nanberg for spearheading the refactor to hooks.

New, newer, StyleSheetManager 🧩

While our <StyleSheetManager /> has existed for a while, it got a huge upgrade in v5 with the ability to extend our CSS parser (stylis) with plugins.

This is useful for a wide variety of scenarios, one common feature request that is now finally possible is fully automatic RTL support for your styles!

RTL support 🌏

Here is how you can turn your styles from left-to-right to right-to-left:

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

That is all you need to do! πŸ”₯ We are very excited by the possibilities that this opens up and all the plugins you all are going to come up with to give styled-components superpowers.


Support us πŸ™

styled-components is used by a lot of people. Like, a lot a lot. The library has been downloaded over 39 million times and is depended upon by hundreds of thousands of public repositories, not including the many private ones that do not show up on GitHub! 😱

styled-components is used widely, and we, the core team, take this responsibility very serious. Unfortunately, maintenance is almost entirely volunteer-based and we have very limited resources to pay anybody, attend conferences or organize summits.

If you use styled-components at your company, please consider contributing to our OpenCollective. We would love to get the entire core team into the same room this year, and that would help make it possible. πŸ™‡β€β™‚οΈ


From the entire styled-components core team, we hope you enjoy v5. As always, stay stylish πŸ’…

πŸ’… styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…

Evan Jacobs

Written by

FE Architect @sesame. Passionate about web accessibility, performance, and enjoyable user experiences. https://probablyup.com

πŸ’… styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…