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.js 消えるライフサイクルメソッドについて
Search
takf
October 10, 2019
Programming
0
130
React.js 消えるライフサイクルメソッドについて
takf
October 10, 2019
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
500
Atomic Design とテストの○○な話
takfjp
2
1.8k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.7k
FARM スタックに触れてみる
takfjp
0
1.5k
React Testing Library の Query について整理してみた
takfjp
0
480
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
3.1k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
420
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
320
meguro.es.pdf
takfjp
0
130
Other Decks in Programming
See All in Programming
XP, Testing and ninja testing ZOZ5
m_seki
3
670
CSC305 Lecture 05
javiergs
PRO
0
210
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
明日から始めるリファクタリング
ryounasso
0
140
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Swift Concurrency - 状態監視の罠
objectiveaudio
2
520
Software Architecture
hschwentner
6
2.3k
Leading Effective Engineering Teams in the AI Era
addyosmani
5
420
理論と実務のギャップを超える
eycjur
0
140
Le côté obscur des IA génératives
pascallemerrer
0
150
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
570
CSC305 Lecture 06
javiergs
PRO
0
230
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Producing Creativity
orderedlist
PRO
347
40k
The Invisible Side of Design
smashingmag
302
51k
Bash Introduction
62gerente
615
210k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Become a Pro
speakerdeck
PRO
29
5.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
4 Signs Your Business is Dying
shpigford
185
22k
Transcript
React.js 消えるライフサイクルメソッドについて Misoca 秋のLT大会 2019.10.10
登壇者について furuichi (@takfjp) 株式会社カオナビ所属 主にフロントエンド(React)の開発に携わっています
https://corp.kaonavi.jp/recruit/
Reactのバージョンアップでこれから消えるライフサイクル メソッドについてお話しします ・現在のReactのバージョン v16.10.0 Released! (2019/10現在) ・v17 の登場はまだ未定
これまでの主な Breaking Changes v16.3 (2018/03) - New Context API, 新しいライフサイクルメソッド追加
- getDerivedStateFromProps - getSnapshotBeforeUpdate v16.8 (2019/02) - React Hooks が追加! - -> 関数コンポーネントが State を持てるように
目覚ましい進歩と その裏で消えゆく者たち・・・
componentWillMount componentWillRecieveProps componentWillUpdate 消える(予定)ライフサイクルメソッド
componentWillMount -> UNSAFE_componentWillMount componentWillRecieveProps -> UNSAFE_componentWillRecieveProps componentWillUpdate -> UNSAFE_componentWillUpdate v16.9
より接頭辞 UNSAFE_ がないと warning v17 で完全に削除 (後方互換性なし) -> 接頭辞つきであればであればv17でも動作 ??
componentWillUnmount 消えずに残る者 まだまだ現役じゃぞい
- v17 より非同期レンダリングを正式にサポート - React Fiber (コアエンジン)が差分の整合性を保つため - componentWillHoge が何度も呼ばれる
(render() が何度も実 行されてしまう) ことで DOM の整合性が危うくなる なぜ消える?
- 今後も残るライフサイクルメソッドに置き換え - componentWillRecieveProps -> componentDidUpdate など - getDerivedStateFromProps も置き換え策
- 公式曰く「まれなライフサイクルメソッド」らしい … - ライフサイクルメソッドに依存しない実装 - componentWillMount 内の処理をconstructorに移すなど 対策 (1)
リファクタのコストが高い場合: ❯ npx react-codemod rename-unsafe-lifecycles <path> https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles 対策 (2)
コマンドラインからファイルを指定 -> 廃止予定のメソッド名を自動的に UNSAFE_xxx に置換
Thank you!