This Week in React #292 キャッチアップ

発行日: 2026-07-29 ソース: This Week in React #292

今週の注目ポイント

• Octane が公開。Inferno 作者・元 React/Svelte の Dominic Gannaway による「Reactの後継」。React のメンタルモデルを保ちつつ Hooks/Suspense/Actions を事前コンパイルし、Virtual DOM を排除。Hook のルールや依存配列の管理も不要にする野心的なプロジェクト。
• TanStack が RSC を一部撤退して SSR に回帰。tanstack.com で重い依存には RSC を使っていたが、ライブラリが軽量化したため SSR に切り替え性能改善。TanStack Start では SSR / RSC を文脈ごとに選べる方針。あわせて新ブランディング・デザインシステムへの刷新も発表。
• npm の公開時マルウェアスキャンが GitHub から提供開始。新規公開パッケージは公開前に自動スキャンされ、公開〜一般公開の間に5〜15分の遅延が入るようになる。サプライチェーン対策の強化。
• Chrome 151 が SPA のソフトナビゲーション（history.pushState 遷移）を Core Web Vitals として既定計測。DevTools・web-vitals・Lighthouse・PSI・RUM に統合される。

React

Octane – React’s programming model, compiled

• URL: https://octanejs.dev/
• 要約: 元 React/Svelte・Inferno 作者の Dominic Gannaway による新しい「Reactの後継」。React のメンタルモデルを維持しつつ Hooks・Suspense・Actions を事前コンパイル。Virtual DOM を排除しネイティブのブラウザイベントを利用、Hook のルールや依存配列の管理を不要にする。JSX/TSX と TSRX に対応し、TanStack・React Three Fiber・Lynx・StyleX・NativeScript との統合を持つ。

Next.js docs preview - Offline support

• URL: https://preview.nextjs.org/docs/app/guides/offline-support
• 要約: experimental.useOffline を有効化すると、ネットワーク断時に Next.js がエラーを投げず、リクエストを保留にして自動リトライできるようになる。

React Advanced London Conference

• URL: https://reactadvanced.com/?utm_source=thisweekinreact
• 要約: 10月23日・26日にロンドンで開催。TanStack・Vercel・Apollo から初期スピーカーが発表。コード「TWIR」で10%割引。

TanStack - We Stopped Using RSC on TanStack.com

• URL: https://tanstack.com/blog/we-stopped-using-rsc-on-tanstack-com
• 要約: 重い依存のために RSC を採用していたが、ライブラリが軽量化したため SSR に切り替え、より良い性能を達成。TanStack Markdown と TanStack Highlight（alpha）を導入。TanStack Start では SSR / RSC を文脈ごとに選択できる。

Making Referential Stability a Type

• URL: https://www.jovidecroock.com/blog/referential-stability-types/
• 要約: stableref/react を使い、メモ化済みの値を Stable<T> 型でタグ付けする提案。メモ化されていない props や依存にはコンパイルエラーを出し、API がメモ化済みの値のみを受け取ることを強制する。

Experimenting with RSCs for Performance and UX in Next.js

• URL: https://aurorascharff.no/posts/experimenting-with-rsc-for-performance-and-ux-in-nextjs/
• 要約: Next.js 16.3 でサーバー側処理を維持する3つの実験。クエリパラメータによるページネーション、ストリーミング結果でフォーカスを保つ検索フィールド、アクションからの JSX 生成。

How to find a Next.js memory leak in production

• URL: https://xabierlameiro.com/blog/nextjs/nextjs-memory-leak-in-production
• 要約: Next.js の3つのメモリリークをヒープスナップショットで検出する方法を解説。v16.3 での Dan Abramov による最近の修正も含む。

The state of zero-runtime CSS-in-JS, mid-2026

• URL: https://dx-styles.dev/blog/state-of-zero-runtime-css-in-js/
• 要約: Vanilla-Extract・Panda CSS・StyleX・next-yak・Linaria・dx-styles などコンパイル時 CSS-in-JS ソリューションの包括的な現状分析。

How to Think in Remix UI Instead of React

• URL: https://sergiodxa.com/tutorials/think-in-remix-ui-instead-of-react
• 要約: React の視点から Remix v3 を実践的に紹介。コンポーネントは一度だけ実行され render クロージャを返し、this.update() で再レンダリングする。Hooks より制御しやすいがボイラープレートは増える。

The Absolute State of Management

• URL: https://infrequently.org/2026/07/state-management/
• 要約: Alex Russell が、React の状態管理ライブラリは pub/sub で状態を伝播するだけで真の「管理」をしていないと主張。本当の管理には CRDT・sync engine・vector clock など時間/順序の概念が必要とする。

Canvas UI

• URL: https://canvasui.dev/
• 要約: WebGPU と HTML-in-canvas を活用したフレームワーク非依存のクリエイティブコンポーネント群。React との一級統合を持つ。

TanStack Table v9 beta.58

• URL: https://tanstack.com/table/beta/docs/framework/react/guide/cell-selection
• 要約: セル選択とキーボードナビゲーションのサポートを追加。

React Router 8.3

• URL: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v830
• 要約: RSC エントリの更新。

Reassure 1.6

• URL: https://github.com/callstack/reassure/releases/tag/reassure%401.6.0
• 要約: React / React Native 向けパフォーマンステスト。安定性測定の改善。

Astryx 0.1.8 & 0.1.9

• URL: https://github.com/facebook/astryx/releases#release-v0.1.9
• 要約: Astryx の 0.1.8 / 0.1.9 リリース。

Jack Herrington - TanStack is Doing What?

• URL: https://www.youtube.com/watch?v=2aKGR4RECj0
• 要約: TanStack の変更を告知するストリーム。TanStack は新ブランディング・デザインシステム・専任リードデザイナーとともに刷新された。

Shruti Kapoor - React Debugging with Performance Tracks

• URL: https://www.youtube.com/watch?v=B_w1xFbRvCg
• 要約: Performance Tracks を使った React のデバッグ解説動画。

その他（JS / CSS / Web全般）

TC39 Meeting Advancement

• URL: https://bsky.app/profile/tc39.es/post/3mrdjr6uq2t2i
• 要約: Promise.allKeyed・Error.code・Map.take・RegExp Linear Matching などの提案が前進。Composites は interning ベースのアプローチへ。

Core Web Vitals - Measuring soft navigations

• URL: https://developer.chrome.com/docs/web-platform/soft-navigations
• 要約: Chrome 151 が SPA のソフトナビゲーション（history.pushState 遷移）を既定で計測。DevTools・web-vitals パッケージ・Lighthouse・PageSpeed Insights・RUM ツールに統合される。

GitHub - npm publish-time malware scanning

• URL: https://github.blog/changelog/2026-07-28-npm-publish-time-malware-scanning-and-dual-use-metadata/
• 要約: 新規公開パッケージは公開前に自動スキャンされる。公開から一般公開まで5〜15分の遅延が入るようになる。

State of CSS - Survey results

• URL: https://2026.stateofcss.com/en-US
• 要約: State of CSS 2026 の調査結果。

ECMAScript Deferred Module Evaluation with import defer

• URL: https://nitayneeman.com/blog/introducing-import-defer-in-ecmascript/
• 要約: Stage 3 の遅延モジュール評価機能。すでに多くのツールで実装済みで、標準採用に近づいている。

Your SPA Is Leaking Memory. Soak Test It

• URL: https://denodell.com/blog/your-spa-is-leaking-memory-soak-test-it
• 要約: ループさせたユーザーフロー内で Chrome の node/listener 数をアサートし、SPA のメモリリークを検出する Playwright の実践レシピ。

Playwright 1.62

• URL: https://github.com/microsoft/playwright/releases/tag/v1.62.0
• 要約: 新しいコンポーネントテストモデル、AbortSignal サポート、WebP スクリーンショット、分離されたリトライを追加。

Webpack 5.109

• URL: https://webpack.js.org/blog/2026-07-24-webpack-5-109/
• 要約: CSS・HTML・TypeScript の組み込みサポートを既定で有効化。Vite 互換の import.meta API とアセットクエリサフィックスを追加。

Firefox 153

• URL: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/153
• 要約: Picture-in-Picture、import-as-text、popover="hint" のサポートを追加。