styled-components maintenance mode: A 40% faster fork styled-components has entered maintenance mode, leaving many production apps dependent on it facing performance and maintenance challenges. Sanity, along with Linear, created and open-sourced a fork to address significant performance issues by leveraging React 18 and 19 features. --- The maintenance mode nobody prepared for styled-components never implemented React 18's useInsertionEffect hook, which was designed to prevent performance issues related to runtime style injection. React 18 shipped in March 2022 to optimize CSS-in-JS performance, but styled-components remained on React 17 patterns. Style injection during render causes layout recalculations and performance degradation. Evan Jacobs, styled-components maintainer, publicly advised against adopting styled-components for new projects. There are millions of production components still relying on styled-components. Migration away is time-consuming and disruptive, but performance needs can't be compromised. --- The Sanity and Linear approach: Fork first, ask questions later Sanity Studio and UI libraries heavily depend on styled-components. Options: Rewrite everything (long-term plan underway). Accept slower performance (unacceptable). Fix styled-components themselves. Opened PR #4332 for useInsertionEffect support, but it stalled due to maintenance mode. Created forks to provide immediate performance benefits and help the community. --- The 40% performance gap Benchmarking against other CSS-in-JS libraries showed styled-components still had the best performance despite being unmaintained. The key missing feature: React 18's useInsertionEffect hook. Previous style injection during render blocked rendering and caused layout thrashing. Code changes example: Before: styles injected during render. After: styles buffered and injected in insertion effect, optimizing browser layout. Additional optimizations: Replaced userland array operations with native Array.prototype.flatMap. Improved useRef patterns using useState for memory savings. Optimized hash functions with native Math.imul. Modernized build output from ES5 to modern JavaScript syntax. These optimizations together save significant CPU time on large apps with thousands of components. --- What the team at Linear found Using the Sanity fork in Linear's React 18 app improved first render times by up to 40% without any code changes or migration. Installation is simple: Positive feedback from Linear highlighted quick turnaround and wide applicability. --- Forking fork: React 19 broke everything (so we fixed that too) Streaming server-side rendering (SSR) with styled-components was broken since React 18. React 19 introduces native inline CSS stylesheet support, optimized for streaming SSR. Sanity's fork eliminates the need for ServerStyleSheet and related overhead. Example React 19 SSR handler uses renderToReadableStream without collecting styles manually. Integration with Next.js App Router is vastly simplified: No need for StyledComponentsRegistry, useServerInsertedHTML, or StyleSheetManager. Just add the styled-components compiler option to next.config.ts: --- It's a jet-powered life vest The forked styled-components-last-resort repository acts as a performance lifeline, not a new maintainer effort. Sanity is actively migrating away from styled-components to vanilla-extract; others can follow their own migration path. The fork delivers: Immediate performance