こんにちは！アミットです👨‍💻
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