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
120
React.js 消えるライフサイクルメソッドについて
takf
October 10, 2019
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
480
Atomic Design とテストの○○な話
takfjp
2
1.8k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.6k
FARM スタックに触れてみる
takfjp
0
1.4k
React Testing Library の Query について整理してみた
takfjp
0
460
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
3k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
410
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
310
meguro.es.pdf
takfjp
0
120
Other Decks in Programming
See All in Programming
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
270
PipeCDのプラグイン化で目指すところ
warashi
1
250
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.8k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
250
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
5つのアンチパターンから学ぶLT設計
narihara
1
150
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Side Projects
sachag
455
42k
Six Lessons from altMBA
skipperchong
28
3.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
240
How STYLIGHT went responsive
nonsquared
100
5.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Faster Mobile Websites
deanohume
307
31k
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!