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! 😍💯🎉💅

EJ: Updated January 13, 2020 with the formal v5 release.

We are very excited to announce that the styled-components v5 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. ✨(*however we did remove the deprecated “subfunctions on attrs” API)

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

npm install styled-components@^5.0.0

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:

26% smaller bundle size (16.2kB vs. 12.42kB min+gzip) ⚡️

(16.2kB vs. 12.42kB 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.

If you’d like to learn more, have a look at our CHANGELOG for a detailed breakdown! Or read on to have a quicker overview…

If you use jest-styled-components, make sure to update 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: