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
490
Atomic Design とテストの○○な話
takfjp
2
1.8k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.6k
FARM スタックに触れてみる
takfjp
0
1.4k
React Testing Library の Query について整理してみた
takfjp
0
470
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
3.1k
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
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
750
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
170
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
920
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
150
令和最新版手のひらコンピュータ
koba789
0
100
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
6
1k
Workers を定期実行する方法は一つじゃない
rokuosan
0
140
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
800
構文解析器入門
ydah
7
2k
Featured
See All Featured
Bash Introduction
62gerente
614
210k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Optimizing for Happiness
mojombo
379
70k
Unsuck your backbone
ammeep
671
58k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Designing Experiences People Love
moore
142
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Side Projects
sachag
455
43k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building an army of robots
kneath
306
45k
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!