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
Le côté obscur des IA génératives
pascallemerrer
0
140
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
Go言語はstack overflowの夢を見るか?
logica0419
0
270
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
420
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.1k
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
210
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
830
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
What's new in Spring Modulith?
olivergierke
1
150
チームの境界をブチ抜いていけ
tokai235
0
170
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
210
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Language of Interfaces
destraynor
162
25k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
KATA
mclloyd
32
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Code Review Best Practice
trishagee
72
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Docker and Python
trallard
46
3.6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
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!