Reactのコンポーネントライフサイクルを完全ガイド！初心者でもわかるReactのライフサイクル入門

1. Reactのライフサイクルとは？

1. Reactのライフサイクルとは？

Reactのコンポーネントには、マウント（生成）、更新、アンマウント（削除）という大きな流れがあります。これを「ライフサイクル」と呼びます。

例えば、アプリを開いたときに表示される画面はコンポーネントがマウントされた状態です。ユーザーがボタンを押して表示が変わると更新が行われます。そしてページを閉じたりコンポーネントが不要になったときにアンマウントされます。

つまり、ライフサイクルは「表示されてから消えるまでの一連の流れ」を管理する仕組みです。

2. マウント時に行われること

2. マウント時に行われること

マウントとは「コンポーネントが最初に画面に登場する瞬間」です。Reactではこのときに初期データを準備したり、サーバーから情報を取ってきたりすることが多いです。

関数コンポーネントではuseEffectというフックを使って「マウント時に一度だけ処理を実行する」ことができます。

import React, { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("コンポーネントがマウントされました！");
  }, []);

  return <h1>こんにちは！</h1>;
}

export default App;

3. 更新時に行われること

3. 更新時に行われること

更新とは「コンポーネントの状態（state）や受け取るデータ（props）が変わったとき」に起こるものです。例えばボタンをクリックしてメッセージが変わるとき、Reactは更新処理を行い画面を再描画します。

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("countが更新されました！", count);
  }, [count]);

  return (
    <div>
      <h1>クリック回数: {count}</h1>
      <button onClick={() => setCount(count + 1)}>クリック！</button>
    </div>
  );
}

export default App;

4. アンマウント時に行われること

4. アンマウント時に行われること

アンマウントとは「コンポーネントが画面から消える瞬間」です。例えばタブを閉じたり、ページを移動してコンポーネントが不要になったときに起こります。

Reactではアンマウント時にリソースを片付ける処理（クリーンアップ処理）を書くことができます。これにより、メモリを無駄に使わず、アプリを軽く保つことができます。

import React, { useEffect } from "react";

function Timer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log("タイマー動作中");
    }, 1000);

    return () => {
      clearInterval(id);
      console.log("タイマーを停止しました（アンマウント）");
    };
  }, []);

  return <h1>タイマーコンポーネント</h1>;
}

export default Timer;

5. クラスコンポーネントでのライフサイクル

5. クラスコンポーネントでのライフサイクル

Reactでは昔からある「クラスコンポーネント」でもライフサイクルを扱うことができます。ここでは代表的なメソッドを紹介します。

• componentDidMount … コンポーネントがマウントされたときに実行
• componentDidUpdate … 更新が起きたときに実行
• componentWillUnmount … アンマウントされるときに実行

現在は関数コンポーネントとuseEffectを使う方法が主流ですが、古いコードに触れるときにはクラスコンポーネントの知識も役立ちます。

6. ライフサイクルを理解するメリット

6. ライフサイクルを理解するメリット

ライフサイクルを理解すると、次のようなメリットがあります。

• データの取得タイミングを正しく設定できる
• 不要なリソースを片付けてアプリを効率的に動かせる
• ユーザーの操作に応じて動きを変えられる

特に初心者がつまずきやすいのは「いつ処理を実行すればいいのか」という点です。ライフサイクルを知っていれば、Reactの挙動を予測しやすくなり、エラーを減らすことができます。

まとめ

まとめ

Reactのコンポーネントライフサイクルを全体から振り返る

この記事では、Reactのコンポーネントライフサイクルについて、初心者の方にも理解しやすいように順を追って解説してきました。 Reactのライフサイクルとは、コンポーネントが画面に表示されてから、状態が変化し、最終的に画面から消えるまでの一連の流れを指します。 この流れを理解することは、Reactアプリケーションを正しく動かすための基礎であり、実務でも非常に重要な考え方です。

コンポーネントは、最初にマウントされ、その後ユーザー操作やデータ変更によって更新され、 役目を終えるとアンマウントされます。この三つの段階を意識することで、 「いつ処理を実行すべきか」「どこで後片付けをすればよいか」が明確になります。 特にReact初心者の方にとっては、処理を書く場所が分からず混乱しがちですが、 ライフサイクルの考え方を身につけることで、コードの見通しが一気によくなります。

useEffectでライフサイクルを扱う考え方

現在主流となっている関数コンポーネントでは、useEffectを使ってライフサイクルに応じた処理を記述します。 空の配列を指定すればマウント時のみ実行され、依存配列に値を入れれば更新時の処理を制御できます。 さらに、useEffectの中で関数を返すことで、アンマウント時のクリーンアップ処理を書くことができます。 この仕組みを理解することで、Reactの動作が「ブラックボックス」ではなく、 自分でコントロールできるものとして見えてくるようになります。

データ取得、イベントリスナーの登録、タイマー処理などは、 ライフサイクルを意識せずに書くと、不要な処理が残り続けてしまうことがあります。 その結果、動作が重くなったり、意図しないバグが発生したりします。 だからこそ、マウント、更新、アンマウントのタイミングを正しく理解することが、 安定したReactアプリケーションを作るための近道となります。

サンプルプログラムで理解を深めよう

ここで、ライフサイクルの考え方をまとめたシンプルなサンプルプログラムを確認してみましょう。 マウント時、更新時、アンマウント時の流れを意識した構成になっています。

import React, { useState, useEffect } from "react";

function SampleLifecycle() {
  const [message, setMessage] = useState("初期状態");

  useEffect(() => {
    console.log("コンポーネントがマウントされました");

    return () => {
      console.log("コンポーネントがアンマウントされました");
    };
  }, []);

  useEffect(() => {
    console.log("メッセージが更新されました:", message);
  }, [message]);

  return (
    <div>
      <h2>{message}</h2>
      <button onClick={() => setMessage("更新されました")}>
        メッセージ更新
      </button>
    </div>
  );
}

export default SampleLifecycle;

このように、Reactでは状態の変化とライフサイクルが密接に結びついています。 状態が変われば更新が発生し、そのたびに必要な処理を実行できます。 そして、コンポーネントが不要になったときには、必ず後片付けを行うことで、 安全で効率的なアプリケーションを維持できます。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Reactのコンポーネントライフサイクルとは何ですか？

Reactのコンポーネントライフサイクルとは、コンポーネントが生成されて表示され、更新され、最終的に削除されるまでの一連の流れを指します。主に「マウント」「更新」「アンマウント」の3段階があります。