JSer.info #586 - React 18が正式リリースされました。
Internet Explorerのサポートが終了されています。
主な変更としてConcurrent Renderingに対応するための変更と新しいAPIが追加されています。
setStateの呼び出しを自動的にバッチ化とopt-outするためのflushSyncを追加、緊急と緊急ではない状態の更新を扱うTransition APIがされています。
クライアントのReactDOM.renderとReactDOM.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/ で表示と共有ができるようになっています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
React v18.0 – React Blog
reactjs.org/blog/2022/03/29/react-v18.html
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 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 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 Native 0.68リリース。
依存関係のアップデート、opt-inでNew Architectureへの対応に対応。
React 18の対応は含まれていない。
Release 0.7.0 · facebookexperimental/Recoil
github.com/facebookexperimental/Recoil/releases/tag/0.7.0
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
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 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 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のパフォーマンスタブが新しくなる。
プロファイルを記録し、そのパフォーマンスデータを https://profiler.firefox.com/ で表示と共有ができるようになる。
What's New In DevTools (Chrome 100) - Chrome Developers
developer.chrome.com/blog/new-in-devtools-100/
Chrome 100の開発者ツールの変更点について。
@supportのサポート、Recorderでdata-test属性などのサポート、記録済みのセレクタの変更をサポート。
"Droppped frames"を"Partially presented frames"という表現に変更など
When does React render your component?
www.zhenghao.io/posts/react-rerender
Reactコンポーネントがいつレンダリングされるかについて書かれた記事。
Reactコンポーネントが再レンダリングされる条件、PropsとChildコンポーネントのレンダリング、Contextと再レンダリングについてなど
Understanding Layout Algorithms
www.joshwcomeau.com/css/understanding-layout-algorithms/
CSSのレイアウトアルゴリズム(レイアウトモード)について。
それぞれのレイアウトアルゴリズムによって同じプロパティでもどのように処理されるかは異なる。プロパティはレイアウトアルゴリズムという関数に渡される引数のようなものという話。
Locale Aware Sorting in JavaScript
elijahmanor.com/byte/js-locale-sort
Intl.Collatorを使ったローカライズされた文字列のソートについて
サイト、サービス、ドキュメント
Shakerphobia
npmパッケージ時からimportするものを指定し、Tree Shaking後のbundle sizeを計測するツール
nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill
github.com/nuxodin/dialog-polyfill
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向けの軽量なRunner。
jest-runnerからテストケースごとのIsolationのサポートを取り除くことで、テストの実行をより早くしている。
