Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React 19アップデートのために必要なこと
Search
uhyo
February 25, 2025
Programming
1
310
React 19アップデートのために必要なこと
2025-02-25うひょさん×Takepepeさんが語る! React19 アプデによるフロントエンド開発の今後とは
uhyo
February 25, 2025
Tweet
Share
More Decks by uhyo
See All by uhyo
color-scheme: light dark; を完全に理解する
uhyo
6
450
React 19 + Jotaiを試して気づいた注意点
uhyo
9
2.9k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
3
2.8k
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
8
3.3k
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
4.1k
tsconfig.jsonの設定を見直そう!フロントエンド向け 2024夏
uhyo
26
10k
React 19を概念から理解する
uhyo
22
10k
require(ESM)とECMAScript仕様
uhyo
7
2.2k
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
8
1.8k
Other Decks in Programming
See All in Programming
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
340
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
3
1.2k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
760
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
GoとPHPのインターフェイスの違い
shimabox
2
200
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
790
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
160
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
6
1.7k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
4
850
GAEログのコスト削減
mot_techtalk
0
120
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
4 Signs Your Business is Dying
shpigford
182
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Code Reviewing Like a Champion
maltzj
521
39k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
How to Ace a Technical Interview
jacobian
276
23k
Transcript
React 19アップデートのために 必要なこと 2025-02-25うひょさん×Takepepeさんが語る! React19 アプデによるフロントエンド開発の今後とは
発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 業務でもReactのバージョンを上げるため に日々頑張っている。 2
これまでのあらすじ 2024年4月 React 19 Betaリリース 2024年5月 React 19 RC リリース
その後紆余曲折があり 2024年12月 React 19 正式版リリース! 皆さんはもうバージョン上げましたか? 3
過去のイベント・記事 4
今回のイベントでは React 19も正式版が出たということで、 そろそろアップデートについて考えたい。 アップデートは大変? 破壊的変更は? エコシステムはどうなる? など…… 5
This Talk まずはReact 19へのアップデートに必要なことを 振り返ります 6
React 19アップデートに 向けてすべきこと 7
①公式のアップグレードガイドを読もう https://react.dev/blog/2024/04/25/react-19-upgrade-guide 8
React 19の破壊的変更 React 19の破壊的変更は、古いAPIの削除が主。 React 19で消えるAPIは意外と色々ある。 React v15~18の間にdeprecatedになったAPIたち がついに引退。 9
②React 18.3に上げてみる まだ上げていない人は、一旦18.3に上げてみよう。 React 19で消えるAPIに対するwarningが追加。 アプデ前に対応すべきものを検知できる。 10
React 19で消えるAPI列挙 propTypes / defaultProps※ Legacy Context string refs Module
pattern factories createFactory ReactDOM.render / ReactDOM.hydrate ReactDOM.unmountComponentAtNode 11
React 19で消えるAPI列挙 propTypes / defaultProps※ Legacy Context string refs Module
pattern factories createFactory ReactDOM.render / ReactDOM.hydrate ReactDOM.unmountComponentAtNode 12 古い書き方 (クラスコンポーネント向けなど) Concurrent Rendering
ReactDOMのrender/hydrateに注意 React 18へのアップデートの一環で、 renderからcreateRootへの移行が推奨されていた。 (Upgrade Guideから引用) 13
ReactDOMのrender/hydrateに注意 React 18にアプデしたけどまだcreateRootにして いなかった人は、まずこちらを移行しよう。 (React 18時点でwarningになっているので多分移行しているはずだが) createRootを使うことでConcurrent Renderingが 有効になるため、ごくわずかだが挙動が変わる リスクがある。(変なReactの使い方をしていた場合など)
14
③依存ライブラリをチェック 歴史あるライブラリを使っていた場合、 先にアップデートしておいたほうがいい。 (クラスコンポーネントを中心に古いAPIが消えるため) もしメンテが止まっていたらさよなら。 15
余談: 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
React 19アップデートで大変 なのは? 17
TypeScript周りが一番大変 古いAPIが消えても今どきのプロジェクトは 別に困らないが、TypeScriptの破壊的変更は 結構たいへん。 18
ランタイムの修正が必要な点 ランタイムの修正で対処すべき場合も。 「あらゆるランタイムの修正は動作確認が必要」 みたいな社内文化だと地獄を見るので、 まず社内文化を修正しよう。 19
習慣を直す必要がある点 MutableRef → RefObjectに吸収されてdeprecatedに JSX.Element → React.JSX.Element が推奨 React.VFC →
役目を終えた。 React.FC にする 他にもReact.ReactChildなどdeprecatedになった 型が存在。 20
アップデートのやり方は? 21
TypeScriptとワーニングを駆使する 修正が必要な箇所は大体tscで検知できるはず。 ただし、依存ライブラリ内は無理なので、 そこはReact 18.3のワーニングを活用しよう。 22
codemod 古いAPIなど用にcodemodがあるが、 無理に使わなくてもいい。(修正必要な箇所が少ない) 一方、TypeScript関連の修正をしてくれる types-react-codemodは有用。 とりあえずtscを動かしてみて型エラーが 多かったら使ってみよう。 23
新たなdeprecatedの対処 React 19で新たにdeprecatedになったものは 今すぐ直す必要はないが、お好みで直してもいい。 (codemodもある) 将来に向けて新たに使用しないように 習慣を更新することが重要。 • forwardRefが不要になった •
<Context.Provider> → <Context> など 24
まとめ React 19にアップデートするには、 依存ライブラリをよく確認しつつ、 TypeScriptで変更が必要な箇所を洗い出して、 types-react-codemodを活用して修正しよう。 古いコーディング習慣をReact 19対応に 更新することも忘れずに。 25