React 19アップデートのために必要なこと

2025-02-25うひょさん×Takepepeさんが語る！ React19 アプデによるフロントエンド開発の今後とは

Transcript

1. React 19アップデートのために 必要なこと 2025-02-25うひょさん×Takepepeさんが語る！ React19 アプデによるフロントエンド開発の今後とは
2. 発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 業務でもReactのバージョンを上げるため に日々頑張っている。 2
3. これまでのあらすじ 2024年4月 React 19 Betaリリース 2024年5月 React 19 RC リリース その後紆余曲折があり 2024年12月 React 19 正式版リリース！ 皆さんはもうバージョン上げましたか？ 3
4. 過去のイベント・記事 4
5. 今回のイベントでは React 19も正式版が出たということで、 そろそろアップデートについて考えたい。 アップデートは大変？ 破壊的変更は？ エコシステムはどうなる？ など…… 5
6. This Talk まずはReact 19へのアップデートに必要なことを 振り返ります 6
7. React 19アップデートに 向けてすべきこと 7
8. ①公式のアップグレードガイドを読もう https://react.dev/blog/2024/04/25/react-19-upgrade-guide 8
9. React 19の破壊的変更 React 19の破壊的変更は、古いAPIの削除が主。 React 19で消えるAPIは意外と色々ある。 React v15～18の間にdeprecatedになったAPIたち がついに引退。 9
10. ②React 18.3に上げてみる まだ上げていない人は、一旦18.3に上げてみよう。 React 19で消えるAPIに対するwarningが追加。 アプデ前に対応すべきものを検知できる。 10
11. React 19で消えるAPI列挙 propTypes / defaultProps※ Legacy Context string refs Module pattern factories createFactory ReactDOM.render / ReactDOM.hydrate ReactDOM.unmountComponentAtNode 11
12. React 19で消えるAPI列挙 propTypes / defaultProps※ Legacy Context string refs Module pattern factories createFactory ReactDOM.render / ReactDOM.hydrate ReactDOM.unmountComponentAtNode 12 古い書き方 （クラスコンポーネント向けなど） Concurrent Rendering
13. ReactDOMのrender/hydrateに注意 React 18へのアップデートの一環で、 renderからcreateRootへの移行が推奨されていた。 （Upgrade Guideから引用） 13
14. ReactDOMのrender/hydrateに注意 React 18にアプデしたけどまだcreateRootにして いなかった人は、まずこちらを移行しよう。 （React 18時点でwarningになっているので多分移行しているはずだが） createRootを使うことでConcurrent Renderingが 有効になるため、ごくわずかだが挙動が変わる リスクがある。（変なReactの使い方をしていた場合など） 14
15. ③依存ライブラリをチェック 歴史あるライブラリを使っていた場合、 先にアップデートしておいたほうがいい。 （クラスコンポーネントを中心に古いAPIが消えるため） もしメンテが止まっていたらさよなら。 15
16. 余談: internalsのやつ SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ↓改名された↓ __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE __SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ライブラリがこれを使っていた場合、ライブラリ作者ではなく ユーザーが解雇されてしまうバグがReact 19で修正された。 RecoilがこれのせいでReact 19対応できなかったのは有名。 16
17. React 19アップデートで大変 なのは？ 17
18. TypeScript周りが一番大変 古いAPIが消えても今どきのプロジェクトは 別に困らないが、TypeScriptの破壊的変更は 結構たいへん。 18
19. ランタイムの修正が必要な点 ランタイムの修正で対処すべき場合も。 「あらゆるランタイムの修正は動作確認が必要」 みたいな社内文化だと地獄を見るので、 まず社内文化を修正しよう。 19
20. 習慣を直す必要がある点 MutableRef → RefObjectに吸収されてdeprecatedに JSX.Element → React.JSX.Element が推奨 React.VFC → 役目を終えた。 React.FC にする 他にもReact.ReactChildなどdeprecatedになった 型が存在。 20
21. アップデートのやり方は？ 21
22. TypeScriptとワーニングを駆使する 修正が必要な箇所は大体tscで検知できるはず。 ただし、依存ライブラリ内は無理なので、 そこはReact 18.3のワーニングを活用しよう。 22
23. codemod 古いAPIなど用にcodemodがあるが、 無理に使わなくてもいい。（修正必要な箇所が少ない） 一方、TypeScript関連の修正をしてくれる types-react-codemodは有用。 とりあえずtscを動かしてみて型エラーが 多かったら使ってみよう。 23
24. 新たなdeprecatedの対処 React 19で新たにdeprecatedになったものは 今すぐ直す必要はないが、お好みで直してもいい。 （codemodもある） 将来に向けて新たに使用しないように 習慣を更新することが重要。 • forwardRefが不要になった • <Context.Provider> → <Context> など 24
25. まとめ React 19にアップデートするには、 依存ライブラリをよく確認しつつ、 TypeScriptで変更が必要な箇所を洗い出して、 types-react-codemodを活用して修正しよう。 古いコーディング習慣をReact 19対応に 更新することも忘れずに。 25