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

React 18.3.1 への準拠に向けて、3つの unsafe なクラスコンポーネントライフサイクルメソッドを移行するためのリファレンス。

クイック判定ガイド

ライフサイクルメソッドを移行する前に、そのメソッドが何をしているかのセマンティックカテゴリを特定してください。カテゴリを間違えれば移行パターンも間違います。以下のテーブルで正しいリファレンスファイルにルーティングされます。

componentWillMount - 何をしていますか？

処理内容	正しい移行先	リファレンス
初期状態を設定する(this.setState(...))	constructor へ移動	→ componentWillMount.md
副作用を実行する(fetch、subscription、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 はこれを削除します。React 19 アップグレード前に移行してください。
// UNSAFE_ プレフィックスを一時的に追加しました - componentDidMount / getDerivedStateFromProps / など に置き換えてください。

---

リファレンスファイル

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

• references/componentWillMount.md - 3つのケースと完全な before/after コード
• references/componentWillReceiveProps.md - getDerivedStateFromProps トラップ警告、完全な例
• references/componentWillUpdate.md - getSnapshotBeforeUpdate + componentDidUpdate のペアリング

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