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
5
740
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
460
React 19 + Jotaiを試して気づいた注意点
uhyo
9
2.9k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
3
2.9k
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
『品質』という言葉が嫌いな理由
korimu
0
180
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
760
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
12
4.4k
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
時計仕掛けのCompose
mkeeda
1
310
ML.NETで始める機械学習
ymd65536
0
210
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
800
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
850
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
380
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
1
150
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
For a Future-Friendly Web
brad_frost
176
9.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Music & Morning Musume
bryan
46
6.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
It's Worth the Effort
3n
184
28k
Building Your Own Lightsaber
phodgson
104
6.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Adopting Sorbet at Scale
ufuk
74
9.2k
Designing for humans not robots
tammielis
250
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
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