React 18 プレビュー

• React 18 rcが確定したことで、どのような機能が追加されたのかを見てみよう

• Automatic batching for fewer renders

  • React 18以降では、promise、setTimeout などで発生した連続的な setState もバッチとして処理

• SSR support for Suspense

  • SSRでも Suspense を使えるように改善

• Concurrent features 追加

  • useTransition: urgent と not urgent の state update を区別。debouncing していたコードもこの hook を使って改善可能

  • useDeferredValue: startTransition の中に state を更新するコードを入れるのと同じように、state の遅延された値を使うことが可能

  • useId: unique な id を使えるように改善

  • useSyncExternalStore: internal store である props、state を除き、外部の mutable な object の変化を検知して component の state として使えるようになった。

• StirctMode + StrictEffect

  • 今後追加される OffScreen API と、すでに追加されている Fast Refresh に関連して問題を引き起こしうるコードがあるかを確認するため、effect を含めて dev 環境では 2 回 rendering される。コンポーネントコードを書くときは、mount、unmount、mount のように effect が何回実行されても問題のないコードを書く必要がある。