React v18.0

Summary

React 18 が npm で公開されました。自動バッチング、startTransition／useTransition を含むトランジションAPI、Suspense を活用したストリーミング SSR など、並行レンダリング（Concurrent React）を基盤とする新機能が追加されています。並行レンダリングはオプトインで段階的な移行が可能です。

Key Points

• アップグレード手順: npm で react@18 / react-dom@18 をインストールしてまずアプリを動かす。多くの既存コンポーネントは変更不要。
• 並行レンダリング: レンダリングが中断可能になり、UI をバックグラウンドで準備できる。新機能を使う箇所のみ有効化されるため段階導入が可能。
• 自動バッチ: setTimeout、Promise、ネイティブイベント内の状態更新も自動でバッチされ、不要な再レンダリングを削減。
• トランジション: startTransition / useTransition で「緊急」と「非緊急」更新を区別。非緊急更新は中断・破棄され最新の更新のみレンダリングされる。
• Suspense とデータ: Suspense を用いたデータフェッチは Relay、Next.js、Remix 等のオピニオンated フレームワークでの利用が推奨。クライアント側のコード分割にも引き続き利用可能。
• サーバー関連: Suspense 対応のストリーミング SSR をサポート。Server Components はまだ実験段階で今後のマイナーリリースで安定化予定。
• 移行時の注意: 開発環境で <StrictMode> を有効にして並行性に起因する副作用を検出。ルーターやライブラリは徐々に並行対応へ移行するため、依存ライブラリのアップデートに注意する。

短い運用手順: 1) v18 にアップデートして動作確認、2) StrictMode で開発検証、3) ライブラリが並行対応したら startTransition や Suspense を段階的に導入する。