こんにちは！アミットです👨💻
Reactでコンポーネントを扱っていると出てくるこの言葉...
🌀「ライフサイクル」
最初はよくわからなくても大丈夫！
この記事では、Reactのコンポーネントが生まれてから消えるまでの流れ（ライフサイクル）を、リアルな例とコード付きでやさしく解説します。
🧠 ライフサイクルって何？
Reactのコンポーネントには一生があります。
以下のような流れです：
⏳ マウント（生成）
🔄 アップデート（再描画）
💀 アンマウント（削除）
それぞれの段階で「特定の処理（メソッドやフック）」を使って、好きなタイミングでコードを動かせます。
✅ 前提：クラス vs 関数コンポーネント
Reactでは2つの書き方があります：
| 書き方 | 使用するライフサイクル |
|---|---|
| クラスコンポーネント |
componentDidMount など |
| 関数コンポーネント |
useEffect など |
この記事では両方紹介します！
1️⃣ マウントフェーズ（初回レンダリング）
🧾 何が起きる？
コンポーネントが画面に初めて描画されるフェーズ。
⌛ クラスの場合
class MyComponent extends React.Component {
componentDidMount() {
console.log("✅ 初回レンダリング完了！");
}
render() {
return <h1>こんにちは！</h1>;
}
}
✅ 関数（Hooks）の場合
import { useEffect } from "react";
function MyComponent() {
useEffect(() => {
console.log("✅ 初回レンダリング完了！");
}, []);
return <h1>こんにちは！</h1>;
}
useEffectの第2引数に[]を渡すと初回のみ実行されます！
📦 使いどころ
- APIからデータを取得（fetch）
- イベントリスナーの追加
- 外部ライブラリの初期化
2️⃣ アップデートフェーズ（再レンダリング）
🧾 何が起きる？
状態やプロップスが変わって再描画されるフェーズ。
⌛ クラスの場合
class Counter extends React.Component {
state = { count: 0 };
componentDidUpdate(prevProps, prevState) {
if (prevState.count !== this.state.count) {
console.log("🔁 カウントが更新されました！");
}
}
render() {
return (
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
カウント: {this.state.count}
</button>
);
}
}
✅ 関数（Hooks）の場合
import { useEffect, useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("🔁 カウントが更新されました！");
}, [count]);
return <button onClick={() => setCount(count + 1)}>カウント: {count}</button>;
}
📦 使いどころ
- 状態が変わったときのログ記録
- 特定の変数変更時に処理を実行（例：アニメーション）
3️⃣ アンマウントフェーズ（削除・破棄）
🧾 何が起きる？
コンポーネントが画面から消えるタイミングで実行。
⌛ クラスの場合
class MyComponent extends React.Component {
componentWillUnmount() {
console.log("🧹 クリーンアップ処理を実行します");
}
render() {
return <div>さようなら！</div>;
}
}
✅ 関数（Hooks）の場合
import { useEffect } from "react";
function MyComponent() {
useEffect(() => {
return () => {
console.log("🧹 クリーンアップ処理を実行します");
};
}, []);
return <div>さようなら！</div>;
}
useEffectの return 部分はコンポーネントの破棄時に実行されます！
📦 使いどころ
- タイマーやAPIの中断
- イベントリスナーの削除
- メモリリークの防止
🧪 実践：リアルなライフサイクルの使い方
例：チャットアプリでの通知接続
useEffect(() => {
const socket = new WebSocket("wss://chat.example.com");
socket.onmessage = (msg) => {
console.log("📩 新着メッセージ:", msg.data);
};
return () => {
socket.close(); // アンマウント時に切断
console.log("🔌 通信を切断しました");
};
}, []);
🔁 ライフサイクルの全体像まとめ
1. マウント（初期表示）
→ componentDidMount / useEffect(() => {}, [])
2. アップデート（再表示）
→ componentDidUpdate / useEffect(() => {}, [依存変数])
3. アンマウント（削除）
→ componentWillUnmount / useEffect の return 関数
📚 よくある疑問Q&A
❓ クラスと関数、どちらを使うべき？
✅ 新規プロジェクトなら関数コンポーネント＋Hooksが主流！
クラスは保守やレガシーコードで出ることがあります。
✍️ まとめ
| フェーズ | 主な目的 | 関数(Hooks) | クラス |
|---|---|---|---|
| マウント | 初期処理 | useEffect(() => {}, []) |
componentDidMount |
| 更新 | 再処理 | useEffect(() => {}, [依存]) |
componentDidUpdate |
| 削除 | クリーンアップ |
useEffect の return |
componentWillUnmount |
🏁最後に
Reactのライフサイクルを理解すれば、データ取得・アニメーション・イベント管理・パフォーマンス最適化などすべての土台が作れます。
💬「ここが難しい」「もっと例が欲しい」など、コメントでぜひ教えてください！
📌 タグ候補（Qiita用）
React ライフサイクル Hooks useEffect 初心者向け JavaScript