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) โšก๏ธ
  • 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:

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-plugin-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 ๐Ÿ’…

--

--

--

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

Recommended from Medium

Redesign of Mongo Text Search solution for better performance & accurate results.

Space Cartelsโ€Šโ€”โ€ŠWhite List & Airdrop

ASP.NET Core 2.0 MVC with ReactJS.NET โ€” Basic Setup and Example Template

Clean Codeโ€Šโ€”โ€ŠFunctions

Basic Guide, Properties and Usecases of JSON (JavaScript Object Notation)

Infinite Board for Drag-And-Drop Notes using Angular

Learning Typescript as a Beginner Javascript Programmer

Vue JSโ€Šโ€”โ€ŠFilters

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
Evan Jacobs

Evan Jacobs

Poetry, tech, other pursuits. ๐Ÿณ๏ธโ€๐ŸŒˆ

More from Medium

Create a Netflix Video Player with React-Player, Typescript, and Styled-Components

How to Build a Text-Based Adventure Game Pt. 2: Frontend, React

React 18 Release Candidate is Released | Learn React 18, it's APIs and SSR Improvements

Programinja | thealiraza | React 18 Release Candidate is finally here.

How to Write a Reusable React Loading Indicator