Fork me on GitHub

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

Edit on GitHub 編集履歴を見る

JSer.info #586 - React 18が正式リリースされました。

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

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

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

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

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

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

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


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

依存関係の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のパフォーマンスツールが新しくなっています。

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


ヘッドライン


React v18.0 – React Blog

reactjs.org/blog/2022/03/29/react-v18.html

React ReleaseNote

React 18リリース。
Concurrent Renderingに対応するための変更と新しいAPIが追加される。
setStateの呼び出しを自動的にバッチ化とopt-outするためのflushSyncを追加、ページ遷移時の状態を扱うTransition APIを追加。
クライアントにcreateRoot/hydrateRoot、サーバにrenderToPipeableStream/renderToReadableStreamを追加。
<StrictMode>が開発時は再マウントをテストする挙動に変更、useId/useSyncExternalStore/useInsertionEffectのHooksの追加など。


Release v6.3.0 · remix-run/react-router

github.com/remix-run/react-router/releases/tag/v6.3.0

React library ReleaseNote

React Router 6.3.0リリース。
v5からv6に移行を補助するためのreact-router-dom-v5-compatモジュールの追加


Chromium Blog: Chrome 101: Federated Credential Management Origin Trial, Media Capabilities for WebRTC, and More

blog.chromium.org/2022/03/chrome-101-federated-credential.html

Chrome ReleaseNote

Chrome 101ベータリリース。
UA文字列の削減の開始。
Origin TrialとしてFedCMの追加、Priority Hintsがデフォルトで有効化。
AudioContext.outputLatencyの実装、CSSのont-paletteプロパティの実装、MediaCapabilities APIがWebRTCをサポート。
Third-Party contextでのWebSQLのサポートを削除など


Announcing React Native 0.68 · React Native

reactnative.dev/blog/2022/03/30/version-068

React iOS Android ReleaseNote

React Native 0.68リリース。
依存関係のアップデート、opt-inでNew Architectureへの対応に対応。
React 18の対応は含まれていない。


Release 0.7.0 · facebookexperimental/Recoil

github.com/facebookexperimental/Recoil/releases/tag/0.7.0

React library ReleaseNote

Recoil 0.7.0リリース。
atom()atomFamily()defaultオプションを追加、SnapshotにgetStoreID()メソッドの追加など


ECMAScript proposal updates @ 2022-03 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update

ECMAScript proposal news

2022年3月のTC39 MeetingでのECMAScript ProposalのStage変更まとめ。
Type AnnotationsがStage 1に、DecoratorがStage 3となった。


vite/CHANGELOG.md at main · vitejs/vite

github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30

vite ReleaseNote

Vite 2.9.0リリース。
依存関係のscanとpre-bundleの処理を改善、実験的にCSSのSource Mapのサポート、Web WorkerのSource Mapサポートの改善。
Glob Importsに{ as: 'raw' }を追加し、{ assert: { type: 'raw' }}は非推奨化。
Plugin向けの変更として、ClientとServer間をWebSocketsでやりとりできるAPIの追加など


Electron 18.0.0 | Electron

www.electronjs.org/blog/electron-18-0

Electron ReleaseNote

Electron 18.0.0リリース。
Chromium 100、Node.js 16.13.2、V8 10.0へアップデート。
Electron 15でnativeWindowOpen: trueがデフォルトとなったため、これを無効化するためだけに残されていたnativeWindowOpenオプションが削除された。


アーティクル


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

hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/

Firefox performance article

Firefoxのパフォーマンスタブが新しくなる。
プロファイルを記録し、そのパフォーマンスデータを https://profiler.firefox.com/ で表示と共有ができるようになる。


What's New In DevTools (Chrome 100) - Chrome Developers

developer.chrome.com/blog/new-in-devtools-100/

Chrome article

Chrome 100の開発者ツールの変更点について。
@supportのサポート、Recorderでdata-test属性などのサポート、記録済みのセレクタの変更をサポート。
"Droppped frames"を"Partially presented frames"という表現に変更など


When does React render your component?

www.zhenghao.io/posts/react-rerender

React article performance

Reactコンポーネントがいつレンダリングされるかについて書かれた記事。
Reactコンポーネントが再レンダリングされる条件、PropsとChildコンポーネントのレンダリング、Contextと再レンダリングについてなど


Understanding Layout Algorithms

www.joshwcomeau.com/css/understanding-layout-algorithms/

CSS article

CSSのレイアウトアルゴリズム(レイアウトモード)について。
それぞれのレイアウトアルゴリズムによって同じプロパティでもどのように処理されるかは異なる。プロパティはレイアウトアルゴリズムという関数に渡される引数のようなものという話。


Locale Aware Sorting in JavaScript

elijahmanor.com/byte/js-locale-sort

i18n JavaScript article

Intl.Collatorを使ったローカライズされた文字列のソートについて


サイト、サービス、ドキュメント


Shakerphobia

shakerphobia.netlify.app/

JavaScript Tools bundler

npmパッケージ時からimportするものを指定し、Tree Shaking後のbundle sizeを計測するツール


nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill

github.com/nuxodin/dialog-polyfill

HTML polyfill JavaScript

Dialog要素のpolyfillライブラリ


ソフトウェア、ツール、ライブラリ関係


nicolo-ribaudo/jest-light-runner: A Jest runner that runs tests directly in bare Node.js, without virtualizing the environment.

github.com/nicolo-ribaudo/jest-light-runner

jest node.js library

Jest向けの軽量なRunner。
jest-runnerからテストケースごとのIsolationのサポートを取り除くことで、テストの実行をより早くしている。


この記事へ修正リクエストをする
JSer.info Slackに参加する