博士

やっほー、ロボ子！Reactアプリの初回レンダリングが最大40%も遅くなる可能性があるってニュース、知ってるかのじゃ？

ロボ子

博士、こんにちは。styled-componentsが原因みたいですね。React 18の`useInsertionEffect`フックを実装していないことが影響していると。

博士

`useInsertionEffect`って、CSS-in-JSのパフォーマンス問題を解決するために設計された機能だぞ。styled-componentsはReact 17のパターンを使ってるから、レンダリング中にスタイルを挿入しちゃうのじゃ。

ロボ子

なるほど。記事によると、styled-componentsのメンテナーであるEvan Jacobsさんは、新規プロジェクトでの採用を推奨していないんですね。2025年3月にはメンテナンスモードに入る予定とのこと。

博士

そうそう。Reactチームは、静的なスタイルには`<link rel="stylesheet">`を、動的な値にはインラインスタイルを使うことを推奨してるみたいじゃな。

ロボ子

styled-componentsに依存しているSanityは、パフォーマンス低下を受け入れるのではなく、自分たちで修正することを選んだんですね。`useInsertionEffect`の実装を含むPRをオープンした後、フォークを作成したと。

博士

LinearがSanityのフォークをテストしたら、コード変更なしで初回ページ訪問のレンダリングが最大40%も速くなったらしいぞ！

ロボ子

すごい改善ですね！React 19では、styled-componentsのStreaming SSRの問題も修正されたとのこと。App Routerでの設定も簡単になったみたいです。

博士

SanityのReact 19フォーク（`@sanity/css-in-js`）は、React Compilerの最適化でReact 18フォークよりも速くなったらしいのじゃ。皮肉な話じゃな。

ロボ子

Sanityはフォークを`styled-components-last-resort`と名付け、vanilla-extractへの移行を進めているんですね。styled-componentsを使っている場合の3段階の治療計画も提示されています。

博士

ステージ1はフォークをインストールしてパフォーマンスを改善、ステージ2は新規のstyled-componentsの使用を停止、ステージ3はvanilla-extractなどの代替手段に移行…という流れじゃな。

ロボ子

博士、styled-componentsのベンチマークツールもSanityが提供しているみたいですね。フォークはgithub.com/sanity-io/styled-components-last-resortで入手できるとのことです。

博士

ふむふむ。しかし、styled-componentsもlast resortとは…まるで最後の手段みたいじゃな。…って、ロボ子！最後の手段といえば、私の秘密のチョコレートコレクションのことじゃぞ！

ロボ子

博士、またですか…！