NOTE 108 / 2022年
描画のまとめ方が変わる前に
React 18 への移行で押さえておきたい、描画と更新の考え方です。
読了目安 約2分
React 18 では、ルートの作り方と更新のまとめ方がこれまでと変わります。createRoot を使う構成に切り替え、StrictMode で開発中の挙動を確認しておくと、意図しない副作用に気づきやすくなります。
自動バッチングや並行描画は、便利さの一方で実行順序への理解を求めます。まずは依存ライブラリの対応状況を確認し、小さな画面から移行して、テストで差分を拾うのが安全です。
押さえたい点
- 01createRoot への切り替えを先に行う
- 02StrictMode で副作用を確認する
- 03依存ライブラリの対応状況を調べる
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- React 学習ガイド 外部サイトreact.dev
- React リファレンス 外部サイトreact.dev
- React で考える 外部サイトreact.dev
- useState リファレンス 外部サイトreact.dev
- useEffect リファレンス 外部サイトreact.dev
- useContext リファレンス 外部サイトreact.dev
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- TypeScript の設定 外部サイトtypescriptlang.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- web.dev 外部サイトweb.dev
- W3C WAI 外部サイトw3.org
- GitHub Docs 外部サイトdocs.github.com
- Chrome for Developers 外部サイトdeveloper.chrome.com