react18-lifecycle-patterns

React 18 ライフサイクルのパターン

3 つの安全でないクラスコンポーネントのライフサイクルメソッドを、React 18.3.1 に準拠したパターンに移行するためのリファレンスです。

すばやく判断するためのガイド

ライフサイクルメソッドを移行する前に、そのメソッドが何をするのか、意味上のカテゴリを特定してください。カテゴリを間違えると、移行方法も間違ってしまいます。以下の表から、適切なリファレンスファイルを確認してください。

componentWillMount - 何をしていますか？

内容	適切な移行方法	リファレンス
初期状態を設定する（this.setState(...)）	constructor に移す	→ componentWillMount.md
副作用を実行する（fetch、サブスクリプション、DOM）	componentDidMount に移す	→ componentWillMount.md
props から初期状態を導出する	props を受け取る constructor に移す	→ componentWillMount.md

componentWillReceiveProps - 何をしていますか？

内容	適切な移行方法	リファレンス
props の変更をきっかけに実行される非同期の副作用（fetch、キャンセル）	componentDidUpdate	→ componentWillReceiveProps.md
新しい props からの純粋な状態導出（副作用なし）	getDerivedStateFromProps	→ componentWillReceiveProps.md

componentWillUpdate - 何をしていますか？

内容	適切な移行方法	リファレンス
更新前に DOM を読み取る（スクロール、サイズ、位置）	getSnapshotBeforeUpdate	→ componentWillUpdate.md
更新前にリクエストをキャンセルする／エフェクトを実行する	前回の値との比較を行う componentDidUpdate	→ componentWillUpdate.md

---

UNSAFE_ プレフィックスのルール

UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps、UNSAFE_componentWillUpdate を恒久的な修正として使用しないでください。

プレフィックスを付けると React 18.3.1 の警告は抑制されますが、次の問題は解決しません。

• Concurrent Mode の安全性に関する問題を修正しない
• React 19（プレフィックスの有無にかかわらず、これらのメソッドが削除されます）に向けてコードベースを準備できない
• 移行で対処するべき、根本的な意味上の問題を修正しない

UNSAFE_ プレフィックスは、実際の移行スプリントを予定するまでの一時的な措置としてのみ適切です。UNSAFE_ プレフィックスを追加する場合は、次のように記してください。

// TODO: React 19 will remove this. Migrate before React 19 upgrade.
// UNSAFE_ prefix added temporarily - replace with componentDidMount / getDerivedStateFromProps / etc.

---

リファレンスファイル

移行するライフサイクルメソッドのリファレンスファイル全文を読んでください。

• references/componentWillMount.md - 変更前／変更後のコードを含む 3 つのケース
• references/componentWillReceiveProps.md - getDerivedStateFromProps の落とし穴に関する警告と詳細な例
• references/componentWillUpdate.md - getSnapshotBeforeUpdate と componentDidUpdate の組み合わせ

移行コードを書く前に、該当するファイルを読んでください。