This Week in React #277 キャッチアップ
発行日: 2026-04-15 ソース: TanStack RSC, React2Dos, Next.js, MUI, Base UI, Aria, StyledComponents, Storm
今週の注目ポイント
- TanStack が実験的に React Server Components をサポート。React Query や TanStack Router と連携する RSC ストリームを提供
- React Flight Protocol に DoS 脆弱性（CVE-2026-23869）が発見され、React 19.2.5 / Next.js 16.2.3 へのアップグレードが必要
- Material UI と MUI X が v9.0 をリリース。Base UI ベースのプリミティブや新コンポーネントを導入
- Styled Components 6.4 で RSC サポートが追加。メンテナンスモードながら大きなアップデート
- Yuku: Zig で書かれた高性能 JS/TS ツールチェーンが登場
React
TanStack - React Server Components Your Way
- URL: https://tanstack.com/blog/react-server-components
- 要約: TanStack が実験的に RSC をサポート。RSC をデータストリームとして扱い、React Query、TanStack Router、localStorage、CDN、HTTP キャッシュと連携可能。サーバー/クライアントスロットを持つコンポジットコンポーネントを提供し、セキュリティ上の理由から Server Actions は明示的に拒否。
React2DoS (CVE-2026-23869): When the Flight Protocol Crashes at Takeoff
- URL: https://www.imperva.com/blog/react2dos-cve-2026-23869-when-the-flight-protocol-crashes-at-takeoff/
- 要約: React Flight Protocol の Server Functions ペイロードデシリアライズ時に発生する DoS 脆弱性。React 19.2.5 または Next.js 16.2.3 へのアップグレードが必要。
Next.js PR - Node.js streams: Fork points
- URL: https://github.com/vercel/next.js/pull/92252
- 要約:
experimental.useNodeStreamsフラグにより、標準 Web Streams の制限を超える高速な Node.js ストリームで SSR/RSC スループットを改善する進行中の作業。
dotJS 2026
- URL: https://www.dotjs.io/speak?utm_source=twir&utm_medium=newsletter&utm_campaign=CFP
- 要約: パリで9月18日に開催されるカンファレンス。Call For Papers は4月28日まで受付中。
GitHub - The uphill climb of making diff lines performant
- URL: https://github.blog/engineering/architecture-optimization/the-uphill-climb-of-making-diff-lines-performant/
- 要約: GitHub が React ベースの PR diff ビューのパフォーマンスを最適化。DOM ノードの削減、CSS セレクタの簡素化、TanStack Virtual の導入、散在していた useEffect フックの除去を実施。
If You Can’t See the Boundary, You Can’t Reason About the System
- URL: https://valentinprugnaud.dev/posts/2026/04/if-you-cant-see-the-boundary-you-cant-reason-about-the-system
- 要約: Next.js App Router ページにおけるクライアント/サーバーコンポーネントの境界をハイライトするツール。
Contributing Callsite Revalidation Opt-out to React Router
- URL: https://programmingarehard.com/2026/04/11/contributing-to-react-router.html/
- 要約: React Router と React Query のリバリデーション動作の違いを解説し、
unstable_defaultShouldRevalidateAPI のコントリビューションを紹介。
The Vertical Codebase
- URL: https://tkdodo.eu/blog/the-vertical-codebase
- 要約: 垂直方向の機能単位でファイルを配置することで React コードベースをスケールさせるアプローチ。
Logging in Next.js with LogLayer: Instrumentation, Console Override, and Structured Logs
- URL: https://yurimutti.com/posts/logging-nextjs-loglayer-instrumentation-console-override-structured-logs
- 要約: Next.js アプリケーションの全ランタイムにわたる統一的なロギングモデルの構築方法。
Now more then ever, you need to master custom ESLint rules
- URL: https://neciudan.dev/master-eslint-rules
- 要約: カスタム ESLint ルールの作成方法を深掘り。useEffect のアンチパターン防止など React に焦点を当てた例を紹介。
Next.js use cache: remote: A Distributed Cache in One Line
- URL: https://tigerabrodi.blog/next-js-use-cache-remote-a-distributed-cache-in-one-line
- 要約: デフォルトのインメモリ Cache Component 機能をサーバーレスインスタンス間のキャッシュに拡張する方法。
Material UI and MUI X 9.0
- URL: https://mui.com/blog/introducing-mui-v9/
- 要約: コアデザインシステムと高度なコンポーネントのバージョンを統一するメジャーリリース。Base UI ベースのプリミティブ（NumberField、Menubar など）を導入し、Chat と Scheduler をアルファ提供。
Base UI 1.4
- URL: https://base-ui.com/react/overview/releases/v1-4-0
- 要約: OTP フィールドのプレビュー、Toast の更新機能、多数のバグ修正を含むリリース。
Unhead 3.0 - Streaming <head> component for any framework
- URL: https://github.com/unjs/unhead/releases/tag/v3.0.0
- 要約: フレームワーク横断でストリーミングをサポートする head 管理コンポーネント。
Storm - Terminal UI framework based on React
- URL: https://github.com/orchetron/storm
- 要約: Ink の制限に対応する TUI フレームワーク。セルレベルの差分検出とデュアルスピードレンダリングアーキテクチャを採用。
Styled Components 6.4
- URL: https://github.com/styled-components/styled-components/releases/tag/styled-components%406.4.0
- 要約: メンテナンスモードにもかかわらず大きなアップデート。RSC サポート、パフォーマンス最適化、React Native の改善を追加。
React Aria 1.17
- URL: https://react-aria.adobe.com/releases/v1-17-0
- 要約: Table の展開可能な行、Virtualizer のウィンドウスクロール、依存関係の統合、サブパスインポートを含むリリース。
Isolet
- URL: https://github.com/millionco/isolet
- 要約: 任意のコンポーネントを自己完結型の分離されたウィジェットとしてパッケージ化するツール。
Remocn
- URL: https://github.com/kapishdima/remocn
- 要約: Remotion 向けのプロダクション対応アニメーション、トランジション、シーンを提供するライブラリ。
Syntax.fm 955 - Next.js Vendor Lock-in No More
- URL: https://syntax.fm/show/995/next-js-vendor-lock-in-no-more
- 要約: Next.js のベンダーロックインからの脱却を議論するポッドキャストエピソード。
その他（JS / CSS / Web全般）
GitHub Stacked PRs in private preview
- URL: https://github.github.com/gh-stack/
- 要約: 大きな変更を小さく焦点を絞った PR に分割し、互いに積み重ねることができる機能のプライベートプレビュー。
You can’t cancel a JavaScript promise (except sometimes you can)
- URL: https://www.inngest.com/blog/hanging-promises-for-control-flow
- 要約: 決して解決しない Promise を使って非同期関数を中断するテクニックの紹介。
What We Learned Building a Rust Runtime for TypeScript
- URL: https://encore.dev/blog/rust-runtime
- 要約: Encore が napi-rs 経由で Node.js に組み込んだ Rust ランタイムの構築経験。インフラ関連の処理を JS イベントループの外に移動し、Express の9倍のスループットを達成。
Chrome 148 Beta
- URL: https://developer.chrome.com/blog/chrome-148-beta
- 要約: CSS の名前のみのコンテナクエリ、HTML-in-Canvas API のオリジントライアルなどを含むベータリリース。
Yuku - High-performance JS/TS toolchain in Zig
- URL: https://github.com/yuku-toolchain/yuku
- 要約: Zig で書かれた高性能 JS/TS ツールチェーン。完全な仕様準拠と Oxc に匹敵するパース速度を提供。
Webpack 5.106
- URL: https://webpack.js.org/blog/2026-04-08-webpack-5-106/
- 要約: プラグインバリデーションフック、CSS ランタイムインジェクション、改善されたツリーシェイキング、実験的な Oxc パーサーサポートを含むリリース。
Bun 1.3.12
- URL: https://bun.com/blog/bun-v1.3.12
- 要約: WebView ヘッドレスブラウザ、ターミナルでの Markdown サポート、ビルトイン Cron スケジューラを追加。
Syncpack 14.0
- URL: https://github.com/JamieMason/syncpack/releases/tag/14.0.0
- 要約: npm 依存関係のバージョン一貫性を管理する CLI が Rust で書き直されたメジャーバージョン。
Phantom UI
- URL: https://aejkatappaja.github.io/phantom-ui/
- 要約: Web Component ベースの構造認識型スケルトンローダー。フレームワーク横断で利用可能。