Home / Companies / Sanity / Blog / Post Details
Content Deep Dive

Cut styled-components into pieces: This is our last resort

Blog post from Sanity

Post Details
Company
Date Published
Author
Cody Olsen
Word Count
1,774
Language
English
Hacker News Points
-
Summary

Styled-components, a popular library for styling React applications, has faced a performance issue due to not implementing React 18's `useInsertionEffect` hook, designed to optimize CSS-in-JS performance. With the library's maintainer, Evan Jacobs, announcing its maintenance mode and advising against new projects using styled-components, existing applications like those at Sanity and Linear faced performance challenges. Sanity addressed this by forking the library and implementing the necessary optimizations, achieving up to 40% faster initial component rendering. The fork, which embraces React 19's architecture and improves streaming SSR, is a temporary solution to help teams maintain performance while planning migrations to modern styling solutions. This effort underscores the challenges and community-driven support within open-source projects, offering a bridge for teams to transition without immediate rewrites.