Styled-components maintenance mode: A 40% faster fork
12 hours ago
- #styled-components
- #React
- #performance
- styled-components is no longer recommended for new projects due to performance issues with React 18's useInsertionEffect.
- The maintainer of styled-components announced maintenance mode, indicating it won't work with React Server Components without 'use client' directives.
- Sanity created a performance-focused fork of styled-components that implements useInsertionEffect, resulting in up to 40% faster renders.
- The fork also optimizes other aspects like replacing userland array operations with native methods and modernizing build output.
- Linear reported a 40% improvement in initial component rendering after switching to Sanity's fork.
- Sanity's fork simplifies streaming SSR in React 19 by eliminating the need for ServerStyleSheet.
- The fork is intended as a temporary solution to improve performance while teams plan their migration away from styled-components.
- Sanity recommends a three-stage approach: immediate relief with the fork, stopping further styled-components usage, and planning a full migration.
- The forks are open-sourced and available for others to use while transitioning to modern styling solutions.