Cut styled-components into pieces: This is our last resort
Written by Cody Olsen, Knut Melvær
Your React app might be 40% slower on first render than it needs to be.
Not because you wrote bad code. Not because React is slow. But because styled-components never implemented React 18's useInsertionEffect hook: a feature specifically designed to solve CSS-in-JS performance problems.
While React 18 shipped in March 2022 with this optimization path, styled-components remained on React 17 patterns, injecting styles during render instead of between render and layout.
This creates a performance-killing cycle: styles get injected, layout recalculates, more styles inject, more recalculations. Exactly what useInsertionEffect was designed to prevent.
"For new projects, I would not recommend adopting styled-components," wrote Evan Jacobs, its maintainer for the last couple of years. Clear. Direct. Honest.
But what about the millions of existing components already in production?
The maintenance mode nobody prepared for
When Evan announced maintenance mode on March 17, 2025, he was refreshingly transparent: styled-components won't work in React Server Components without 'use client' directives. The ecosystem has moved on. He no longer runs styled-components in production.
The React team themselves have made it clear: runtime CSS injection will always be slower than statically extracted styles. They recommend using <link rel="stylesheet"> for static styles and inline styles for dynamic values. That's the future.
Respect. Maintaining a library with 34,000 stars for free is exhausting. We've been sponsoring styled-components for years. We know the burden. Evan's honesty gave everyone clarity to make decisions.
But here's what that announcement didn't address: thousands of production apps with hundreds of thousands of styled components that can't just disappear. Teams at Linear, Sanity, and countless others. We all woke up to the same problem.
Our codebases using styled-components don't care that Tailwind is trending (no lack of trying to make them!). They need to ship features today.
Our decision? Pick up where the community left off, at least temporarily.
Fork first, ask questions later
At Sanity, we had a problem. Sanity Studio runs on styled-components. So does our UI library. Thousands of components, all dependent on a library whose own maintainer says not to use.
We had three choices:
- Rewrite everything (months of work, we're actually doing this)
- Accept degrading performance (not happening)
- Fix it ourselves
Actually, we chose option zero first: contribute the fix upstream. In July 2024, we opened PR #4332 with the useInsertionEffect implementation. But with one maintainer juggling 34,000 stars worth of expectations, for free, our PR joined the queue.
No blame. Open source maintenance is brutal.
So when maintenance mode arrived, we did what we had to: turned our PR into a fork and opened it up for anyone else stuck in the same boat.
The 40% performance gap
We didn't just optimize blindly. We benchmarked against every CSS-in-JS library out there. Emotion, Stitches, Goober, restyle. Styled-components, even in its unmaintained state, is still the most performant by a long shot. Our optimizations made the fastest library even faster.
Here's what styled-components never implemented: React 18's useInsertionEffect. This API was literally designed for CSS-in-JS libraries.