2022-04-05のJS: React 18、Vite 2.9.0、Firefoxの新しいパフォーマンスツール

[azu]

React 18が正式リリースされました。

• React v18.0 – React Blog

Internet Explorerのサポートが終了されています。

主な変更としてConcurrent Renderingに対応するための変更と新しいAPIが追加されています。
setStateの呼び出しを自動的にバッチ化とopt-outするためのflushSyncを追加、緊急と緊急ではない状態の更新を扱うTransition APIがされています。

クライアントのReactDOM.renderとPReactDOM.hydrateとサーバのrenderToStringはそれぞれ非推奨となっています。 これに対応する新しいAPIとして、クライアントにcreateRoot/hydrateRoot、サーバにrenderToPipeableStream/renderToReadableStream`が追加されています。

また、<StrictMode>が開発時は再マウントをテストする挙動に変更、useId/useSyncExternalStore/useInsertionEffectのHooksの追加なども行われています。

詳しいマイグレーション方法については次のドキュメントが公開されています。

• How to Upgrade to React 18 – React Blog

TypeScriptの型定義はまだReact 18の対応版が公開されていませんが、次のIssueとPRで対応されています。

• [RFC] React 18 and types-only breaking changes · Issue #46691 · DefinitelyTyped/DefinitelyTyped
  • [react] React 18 types by eps1lon · Pull Request #56210 · DefinitelyTyped/DefinitelyTyped

React周辺のツールやライブラリのReact 18対応については、次の記事でまとめられています。

• React 周辺ツールの React v18 サポート

---

Vite 2.9.0がリリースされました。

• vite/CHANGELOG.md at main · vitejs/vite

依存関係のscanとpre-bundleの処理を改善、実験的にCSSのSource Mapのサポート、Web WorkerのSource Mapサポートの改善が含まれています。
Glob Importsに{ as: 'raw' }を追加し、{ assert: { type: 'raw' }}は非推奨化されています。

{ assert: { type: 'raw' }}はVite 2.8で、Import Assertionsを意識して導入された構文ですが、Import Assertionsは読み込むモジュールのtypeを検証(assert)する目的のProposalです。そのため読み込むモジュールの評価方法を変更する構文ではありません。

一方で、読み込むモジュールの評価方法を指定するProposalとしてImport Reflectionがあります。Vite 2.9では、こちらのImport Reflectionを意識した構文に変更されました。

---

Firefoxのパフォーマンスツールが新しくなっています。

• Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog

UIも大きく変わり、取得できるデータもWebサイトや動画などの特性に合わせたプリセットが用意されていて、それぞれに合わせたプロファイルが取れるようになっています。
また、取得したパフォーマンスデータは https://profiler.firefox.com/ で表示と共有ができるようになっています。