MENU
  1. ホーム
  2. React
  3. ReactのuseEffectで親コンポーネントのデータ変更を子に反映する方法を徹底解説

ReactのuseEffectで親コンポーネントのデータ変更を子に反映する方法を徹底解説

React

Reactを使った開発では、親コンポーネントのデータ変更を子コンポーネントに正しく反映することが、スムーズなアプリケーション動作の鍵となります。特に、親から渡されるデータ（props）の変化を効率的に監視し、適切な処理を行う仕組みが重要です。本記事では、ReactのフックであるuseEffectを活用して、親コンポーネントから渡されるデータの変更を子コンポーネントで検知し、その変化に応じた処理を行う方法を解説します。具体的なコード例やベストプラクティスも交えながら、初心者から中級者までが実践的な知識を身につけられる内容をお届けします。

目次

Reactのコンポーネント間通信の基本


Reactでは、データフローは一方向（親から子へ）のみ許容されるという特徴があります。この仕組みにより、コンポーネント間の状態管理が簡潔かつ予測可能になります。

親から子へのデータ伝達


親コンポーネントから子コンポーネントにデータを渡す際には、propsを使用します。propsは読み取り専用であり、子コンポーネント側ではその内容を変更することはできません。以下はその基本例です：

function ParentComponent() {
  const [data, setData] = React.useState("Hello, Child!");

  return <ChildComponent message={data} />;
}

function ChildComponent({ message }) {
  return <p>{message}</p>;
}

このコードでは、親コンポーネントがmessageというpropsを通じてデータを子コンポーネントに渡しています。

子から親へのデータ伝達


子コンポーネントから親コンポーネントにデータを伝えたい場合、親コンポーネントで関数を定義し、それを子コンポーネントに渡します。この関数が親の状態を更新します。

function ParentComponent() {
  const [data, setData] = React.useState("");

  function handleUpdate(newData) {
    setData(newData);
  }

  return <ChildComponent updateData={handleUpdate} />;
}

function ChildComponent({ updateData }) {
  return <button onClick={() => updateData("Updated from Child!")}>Click Me</button>;
}

ここでは、子コンポーネントのボタンをクリックすると、親コンポーネントの状態が更新されます。

データの一方向性と管理の明確化


Reactのこの一方向データフローにより、状態がどのコンポーネントに存在し、どこで変更されるのかが明確になります。この特性が、Reactを利用したアプリケーション開発における重要な利点の一つです。

本記事では、この仕組みを活用し、親コンポーネントのデータ変更を子コンポーネントで検知し、動的な処理を行う方法について詳しく解説します。

useEffectの基本的な使い方

Reactで提供されるuseEffectフックは、コンポーネントの副作用（サイドエフェクト）を管理するために使用されます。これにはデータの取得、DOMの更新、イベントリスナーの登録などが含まれます。

useEffectの基本構文


useEffectは以下のような構文で使用します：

useEffect(() => {
  // 副作用の処理
  return () => {
    // クリーンアップ処理（オプション）
  };
}, [依存配列]);
  • 副作用の処理：関数内に記述されるロジックで、データ取得や状態変更などの処理を記載します。
  • クリーンアップ処理：副作用によって生じるリソースの解放などを行う関数。例えば、イベントリスナーの解除やタイマーのクリア。
  • 依存配列：副作用を再実行する条件を指定します。この配列内に記載した値が変更されると、副作用が再実行されます。

基本例：コンポーネントのマウント時に動作するuseEffect

以下の例は、コンポーネントがマウントされた際に1回だけ実行される副作用を示しています：

import React, { useEffect } from "react";

function ExampleComponent() {
  useEffect(() => {
    console.log("Component has been mounted.");

    return () => {
      console.log("Component will be unmounted.");
    };
  }, []); // 空の依存配列
}
  • 依存配列が空の場合、useEffectはマウント時（最初のレンダリング）に1回だけ実行され、アンマウント時にクリーンアップが実行されます。

依存配列を使った状態の監視

以下は、特定の値が変更された際にのみ実行される副作用を示しています：

function Counter({ count }) {
  useEffect(() => {
    console.log(`Count has changed: ${count}`);
  }, [count]); // countの変更を監視
}

この例では、countが変更されるたびにuseEffect内のロジックが実行されます。

無依存配列の場合の挙動


依存配列を指定しない場合、useEffectはコンポーネントのレンダリングのたびに実行されます。これはパフォーマンスに影響するため、必要に応じて依存配列を指定することが推奨されます。

useEffect(() => {
  console.log("This runs after every render.");
});

useEffectを正しく使うことで、状態変更やプロパティの変化を効率的に検知し、アプリケーションの挙動を管理することができます。この後、親から渡されるpropsをuseEffectでどのように監視するかを詳しく解説します。

親コンポーネントのデータ変更を子で検知する仕組み

Reactにおいて、親コンポーネントから子コンポーネントに渡されるpropsは、子コンポーネント側で直接変更できない読み取り専用のデータです。しかし、親コンポーネント側でpropsの値が変更された場合、その変化を子コンポーネントで検知し、適切な処理を行うことが可能です。これを実現するのがuseEffectです。

propsの変更を監視する基本例

以下の例では、親コンポーネントから渡されたdataというpropsの変更を子コンポーネントで検知しています。

import React, { useEffect } from "react";

function ChildComponent({ data }) {
  useEffect(() => {
    console.log(`Data has changed: ${data}`);
    // dataの変更に応じて実行したい処理をここに記述
  }, [data]); // dataの変更を監視
  return <div>Data: {data}</div>;
}

function ParentComponent() {
  const [data, setData] = React.useState("Initial Data");

  return (
    <div>
      <ChildComponent data={data} />
      <button onClick={() => setData("Updated Data")}>Update Data</button>
    </div>
  );
}

このコードでは以下が実現されています：

  1. 親コンポーネントでdataの状態を管理。
  2. ボタンをクリックすると、親のdataが変更。
  3. 子コンポーネントでpropsの変化が検知され、useEffectがトリガーされる。

複数の`props`を監視する

複数のpropsを監視したい場合、依存配列に複数の値を追加することで実現できます。

function ChildComponent({ data, anotherProp }) {
  useEffect(() => {
    console.log(`Either data or anotherProp has changed.`);
  }, [data, anotherProp]); // 複数の依存関係を監視
  return (
    <div>
      <p>Data: {data}</p>
      <p>AnotherProp: {anotherProp}</p>
    </div>
  );
}

この場合、dataまたはanotherPropが変更されるたびにuseEffectが再実行されます。

props変更時に実行する処理の例

以下は、propsが変更された際に外部APIを呼び出す例です。

function ChildComponent({ userId }) {
  useEffect(() => {
    // userIdが変更された際にAPIを呼び出す
    fetch(`/api/user/${userId}`)
      .then((response) => response.json())
      .then((data) => console.log(data));
  }, [userId]); // userIdの変更を監視

  return <div>Current User ID: {userId}</div>;
}

このコードでは、userIdが変更されるたびに新しいユーザーデータを取得します。

適切な依存配列の指定の重要性

依存配列に適切なpropsを指定することは非常に重要です。指定しない場合や不正確な依存配列を使用すると、以下のような問題が発生する可能性があります：

  • 無限ループ
  • 意図しない動作
  • パフォーマンスの低下

本節で学んだ基本を基に、次節では実際に親コンポーネントのデータ変更を利用したアプリケーション例を構築します。

実践例：カウンターアプリの構築

ここでは、親コンポーネントで管理しているカウントデータを子コンポーネントに渡し、その変更をuseEffectで検知して特定の処理を実行するカウンターアプリを構築します。

アプリの概要

  • 親コンポーネントにカウンターを設置。
  • 子コンポーネントは、カウントの値を監視し、特定の条件を満たしたときに通知メッセージを表示する。
  • useEffectを活用してデータ変更を検知。

コード例

以下は、実装例です。

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

// 子コンポーネント
function ChildComponent({ count }) {
  useEffect(() => {
    if (count % 5 === 0 && count !== 0) {
      console.log("Count is a multiple of 5!");
      alert("The count is now a multiple of 5!");
    }
  }, [count]); // countの変更を監視

  return <p>Current Count in Child: {count}</p>;
}

// 親コンポーネント
function ParentComponent() {
  const [count, setCount] = useState(0);

  const incrementCount = () => setCount(count + 1);
  const decrementCount = () => setCount(count - 1);

  return (
    <div>
      <h1>Counter App</h1>
      <p>Current Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
      <ChildComponent count={count} />
    </div>
  );
}

export default ParentComponent;

コードのポイント

  1. 親コンポーネントでの状態管理
    親コンポーネントParentComponentでcountをuseStateで管理し、ボタン操作で値を増減させています。
  2. 子コンポーネントでのデータ検知
    子コンポーネントChildComponentに親からcountを渡し、useEffectで変更を監視しています。
  3. 特定条件の検知と処理
    子コンポーネント側では、countが5の倍数（かつ0でない場合）であるときにアラートを表示します。

動作例

  • Incrementボタンを押すとカウントが増加。
  • Decrementボタンを押すとカウントが減少。
  • カウントが5の倍数になると、子コンポーネントでアラートが表示されます。

応用可能なポイント

この基本構造を応用して、以下のような機能を追加できます：

  • 5の倍数の検知を外部API呼び出しやログ記録に置き換える。
  • 複数のプロパティを監視して異なる条件で処理を実行。
  • コンポーネント分離を強化して可読性を向上。

このカウンターアプリは、親子コンポーネント間でのデータ変更検知とその応用を学ぶのに最適な例です。次節では、このようなアプローチを採用する際の注意点について解説します。

注意点：無限ループとパフォーマンスの最適化

useEffectを使用してデータの変更を監視する際には、特定の注意点を理解し、適切に対応することが重要です。このセクションでは、無限ループの発生を防ぎ、パフォーマンスを最適化するための方法について解説します。

無限ループの原因と防止策

useEffectで無限ループが発生する主な原因は、以下の通りです：

  1. 依存配列の設定ミス
  • useEffectが依存配列に含まれる変数を更新している場合、その更新がuseEffectを再実行し、無限ループが発生します。 例：問題のあるコード
   function Counter() {
     const [count, setCount] = React.useState(0);

     useEffect(() => {
       setCount(count + 1); // 状態の更新が依存配列内の値を変更
     }, [count]); // countを監視

     return <p>{count}</p>;
   }

このコードは、setCountがcountを更新するたびにuseEffectが再実行されるため、無限ループが発生します。

解決策：
副作用内で状態を直接更新しないように設計するか、依存配列を適切に管理します。

   useEffect(() => {
     console.log("Count changed:", count);
   }, [count]);
  1. 外部関数やオブジェクトの参照ミス
  • 依存配列に正しい変数や関数を含めない場合、最新の値が利用されず意図しない動作が発生します。

パフォーマンス最適化の方法

  1. 依存配列を正しく指定
  • 依存配列には、useEffect内で使用しているすべての外部変数を含めます。ESLintのプラグイン（eslint-plugin-react-hooks）を使用すると、適切な依存配列を自動的に推奨してくれます。
   useEffect(() => {
     // 外部変数を使用
   }, [externalVariable]); // 必要な変数を記載
  1. 過剰な再レンダリングを防止
  • 親コンポーネントの状態変更が頻繁に発生する場合、子コンポーネントに渡されるpropsの更新頻度を調整します。React.memoを活用することで、不要なレンダリングを抑制できます。
   const ChildComponent = React.memo(({ data }) => {
     console.log("Rendered");
     return <p>{data}</p>;
   });
  1. 関数やオブジェクトのキャッシュ
  • 毎回新しい関数やオブジェクトが生成されると、それが依存配列の変化と認識されるため、useCallbackやuseMemoを使用してキャッシュします。
   const memoizedCallback = React.useCallback(() => {
     // 関数のロジック
   }, [dependency]);
  1. 条件付き実行で負荷を軽減
  • 必要に応じて条件分岐を設定し、特定の状況でのみ副作用を実行します。
   useEffect(() => {
     if (count > 0) {
       console.log("Count is greater than 0");
     }
   }, [count]);

ベストプラクティス

  • 依存配列に何を含めるかを明確に理解する
    過剰または不足した依存関係は、意図しない動作やパフォーマンス問題を引き起こします。
  • デバッグツールを活用する
    React Developer Toolsを使用して、useEffectの実行回数を確認し、問題箇所を特定します。
  • 副作用の分離
    複数の処理を1つのuseEffectにまとめず、用途ごとに分離して記述します。

このような対策を講じることで、無限ループを回避し、Reactアプリケーションのパフォーマンスを向上させることができます。次節では、複数のデータ変更を扱う際の応用例について解説します。

応用例：複数のデータ変更を扱う場合

親コンポーネントから複数のデータ（props）が渡され、それらが変更されるたびに子コンポーネントで処理を行う場合、適切にuseEffectを設定することが重要です。このセクションでは、複数のデータ変更を効率的に管理する方法を解説します。

複数のデータ変更を監視する基本構造

useEffectの依存配列に複数の値を指定することで、これらの値が変更されるたびに特定の処理を実行できます。

基本例：

function ChildComponent({ propA, propB }) {
  useEffect(() => {
    console.log(`propA or propB has changed`);
  }, [propA, propB]); // propAとpropBの変更を監視

  return (
    <div>
      <p>PropA: {propA}</p>
      <p>PropB: {propB}</p>
    </div>
  );
}

function ParentComponent() {
  const [propA, setPropA] = React.useState(0);
  const [propB, setPropB] = React.useState("Initial");

  return (
    <div>
      <button onClick={() => setPropA(propA + 1)}>Update PropA</button>
      <button onClick={() => setPropB("Updated")}>Update PropB</button>
      <ChildComponent propA={propA} propB={propB} />
    </div>
  );
}

動作のポイント

  • propAまたはpropBが変更されるたびにuseEffectが実行され、console.logが出力されます。
  • 依存配列に記述した変数のみが監視対象となります。

特定のデータ変更に応じた処理を分岐する

複数のデータを監視しても、全てに同じ処理を適用する必要はありません。変更内容に応じて条件分岐を設けることができます。

条件付き処理の例：

function ChildComponent({ propA, propB }) {
  useEffect(() => {
    if (propA > 10) {
      console.log("PropA is greater than 10");
    }
    if (propB === "Updated") {
      console.log("PropB has been updated");
    }
  }, [propA, propB]); // propAとpropBの変更を監視

  return (
    <div>
      <p>PropA: {propA}</p>
      <p>PropB: {propB}</p>
    </div>
  );
}

この場合：

  • propAが10を超えたときだけ特定の処理を実行します。
  • propBが”Updated”に変更された場合にのみ別の処理が実行されます。

依存関係を分割して効率を向上させる

依存関係を分割することで、それぞれのデータ変更に対して適切に処理を実行することができます。

依存関係ごとに分けた例：

function ChildComponent({ propA, propB }) {
  useEffect(() => {
    console.log(`PropA has changed: ${propA}`);
  }, [propA]); // propAの変更を監視

  useEffect(() => {
    console.log(`PropB has changed: ${propB}`);
  }, [propB]); // propBの変更を監視

  return (
    <div>
      <p>PropA: {propA}</p>
      <p>PropB: {propB}</p>
    </div>
  );
}

この実装では、propAとpropBが変更された際にそれぞれ独立して処理が実行されるため、効率的です。

実践応用：リアルタイムデータ更新の例

リアルタイムで更新される複数のデータを処理するケースでは、以下のようにAPIのデータや外部の値を監視することが可能です。

function ChildComponent({ userId, status }) {
  useEffect(() => {
    if (userId) {
      fetch(`/api/user/${userId}`)
        .then((response) => response.json())
        .then((data) => console.log(data));
    }
  }, [userId]); // userIdの変更を監視

  useEffect(() => {
    if (status === "online") {
      console.log("User is online");
    }
  }, [status]); // statusの変更を監視

  return (
    <div>
      <p>UserID: {userId}</p>
      <p>Status: {status}</p>
    </div>
  );
}

この例では：

  • userIdが変更されるたびに新しいユーザーデータを取得。
  • statusが”online”に変化した際に特定の処理を実行。

注意点

  1. 依存配列の過不足を防ぐ
    必要な値を正確に記述し、不要な値を含めないようにします。
  2. 複雑なロジックの分離
    処理が複雑になる場合は関数に分割して可読性を向上させます。

このように、複数のデータ変更を効率的に監視し、適切な処理を実行することで、より柔軟で強力なReactアプリケーションを構築できます。次節では、これらの機能を活用する際のデバッグとトラブルシューティングについて解説します。

デバッグのヒントとツールの活用法

ReactアプリケーションでuseEffectを使用する際、正しく動作しているかを確認するためのデバッグとトラブルシューティングは重要です。useEffectの依存配列のミスや予期しない再レンダリングの問題を解決するための方法を解説します。

React Developer Toolsの活用

React公式のデバッグツールであるReact Developer Toolsは、コンポーネントの状態やprops、レンダリング状況をリアルタイムで確認できる便利なツールです。

主な機能：

  1. コンポーネントの構造の確認
    ツリー構造でコンポーネントを確認し、propsや状態を確認できます。
  2. 再レンダリングの検出
    特定のコンポーネントが意図せず再レンダリングされている場合、その状況を視覚的に把握できます。

インストールと使用方法：

  1. ChromeまたはFirefoxの拡張機能として「React Developer Tools」をインストールします。
  2. Reactアプリを開き、開発者ツールのComponentsタブを確認します。
  3. 該当コンポーネントを選択して、propsやstateを確認します。

依存配列の問題を特定する

useEffectの依存配列に誤りがある場合、無限ループや意図しない動作を引き起こします。以下の手順で問題を特定します：

  1. デバッグ用のログを挿入
    useEffect内にログを追加して、どの依存関係が変更されているかを確認します。
   useEffect(() => {
     console.log("Effect triggered", dependencyA, dependencyB);
   }, [dependencyA, dependencyB]);
  1. ESLintのプラグインを活用
    eslint-plugin-react-hooksを使用すると、依存配列に必要な変数を自動的に指摘してくれます。 設定例:
   npm install eslint-plugin-react-hooks --save-dev

.eslintrcファイルに以下を追加：

   {
     "plugins": ["react-hooks"],
     "rules": {
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "warn"
     }
   }
  1. 問題例の修正
    間違ったコード：
   useEffect(() => {
     // 外部関数を依存配列に含めていない
     doSomething();
   }, []);

修正後のコード：

   useEffect(() => {
     doSomething();
   }, [doSomething]); // 外部関数を依存配列に追加

パフォーマンス問題の分析

Profilerを利用する
React Developer ToolsのProfilerタブを使用すると、再レンダリングの頻度や時間を計測できます。

  • Profilerで特定のコンポーネントを選択し、再レンダリングにかかる時間や依存関係の変化を確認します。
  • 不必要な再レンダリングを削減するためにReact.memoやuseMemoを活用します。

例:

const ChildComponent = React.memo(({ data }) => {
  console.log("Rendered");
  return <div>{data}</div>;
});

よくあるトラブルと対策

  1. 無限ループが発生する
  • 原因：依存配列が正しく設定されていないか、状態を直接変更している。
  • 対策：依存配列を適切に設定し、状態の変更は避ける。
  1. 副作用が期待通りに動作しない
  • 原因：依存関係が不足している。
  • 対策：ESLintで依存配列を確認し、不足を補う。
  1. データが最新状態にならない
  • 原因：キャッシュされた値が使われている。
  • 対策：useCallbackやuseMemoを活用して最新状態を保持。

デバッグのベストプラクティス

  1. 小さな単位で問題を切り分ける
  • 問題の原因を特定するために、複雑な処理を分解して一つずつ確認します。
  1. ツールをフル活用する
  • React Developer ToolsやESLintを組み合わせることで、問題箇所を迅速に発見できます。
  1. デバッグログを整理する
  • console.logを使う場合は明確なメッセージを付け、必要な情報のみを記録します。

これらのデバッグ手法とツールを活用することで、useEffectを正確かつ効率的に運用できるようになります。次節では、useEffectを使った演習問題を通して、実践的なスキルを高めます。

演習問題：useEffectを使った実装

ここでは、useEffectの理解を深めるために、実際にReactコンポーネントを作成する演習を提案します。この演習を通じて、親コンポーネントから渡されたpropsの変更を監視し、特定の条件で処理を実行する方法を練習します。

演習1: 時間更新コンポーネントの作成

課題内容：
親コンポーネントから時間間隔（ミリ秒単位）を渡し、その間隔で現在時刻を更新する子コンポーネントを作成してください。

要件：

  1. 親コンポーネントで間隔を設定する（例：1000msや2000ms）。
  2. 子コンポーネントでuseEffectを使用し、間隔ごとに現在時刻を更新する。
  3. 親で間隔を変更した場合、それに応じて更新タイミングを調整する。

実装例（完成例は以下）：

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

// 子コンポーネント
function Clock({ interval }) {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, interval);

    return () => clearInterval(timer); // クリーンアップ処理
  }, [interval]); // intervalの変更を監視

  return <p>Current Time: {time}</p>;
}

// 親コンポーネント
function App() {
  const [interval, setInterval] = useState(1000);

  return (
    <div>
      <h1>Clock with Dynamic Interval</h1>
      <button onClick={() => setInterval(1000)}>1 Second</button>
      <button onClick={() => setInterval(2000)}>2 Seconds</button>
      <Clock interval={interval} />
    </div>
  );
}

export default App;

演習2: 親からの状態に応じたスタイル変更

課題内容：
親コンポーネントから渡されるフラグ（true/false）に基づいて、子コンポーネントの背景色を変更する機能を実装してください。

要件：

  1. 親でボタンをクリックすることでフラグを切り替える。
  2. 子コンポーネントではuseEffectを使用し、フラグに応じた背景色を変更する。

実装例（完成例は以下）：

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

// 子コンポーネント
function Background({ isActive }) {
  useEffect(() => {
    document.body.style.backgroundColor = isActive ? "lightgreen" : "lightcoral";

    return () => {
      document.body.style.backgroundColor = ""; // クリーンアップ
    };
  }, [isActive]); // isActiveの変更を監視

  return <p>The background color is now {isActive ? "green" : "red"}.</p>;
}

// 親コンポーネント
function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <h1>Dynamic Background Color</h1>
      <button onClick={() => setIsActive(!isActive)}>
        Toggle Background
      </button>
      <Background isActive={isActive} />
    </div>
  );
}

export default App;

演習3: 外部APIデータのリアルタイム表示

課題内容：
親コンポーネントから渡される検索クエリに基づき、子コンポーネントで外部APIからデータを取得して表示する。

要件：

  1. 親で入力されたクエリ（テキスト）を子に渡す。
  2. 子でuseEffectを使い、クエリ変更時にAPIを呼び出して結果を表示する。
  3. クエリが空の場合は「No results」を表示する。

実装例:

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

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query) {
      setResults([]);
      return;
    }

    fetch(`https://api.example.com/search?q=${query}`)
      .then((response) => response.json())
      .then((data) => setResults(data.items || []));

  }, [query]); // queryの変更を監視

  return (
    <div>
      <h2>Search Results</h2>
      {results.length > 0 ? (
        <ul>
          {results.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>No results</p>
      )}
    </div>
  );
}

function App() {
  const [query, setQuery] = useState("");

  return (
    <div>
      <h1>Search App</h1>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Enter search term"
      />
      <SearchResults query={query} />
    </div>
  );
}

export default App;

演習を通じての学び

  • useEffectを使った動的なデータ更新と副作用管理。
  • クリーンアップ処理の重要性。
  • 状態の変更に応じた柔軟なUIの構築。

演習が完了したら、これまで学んだベストプラクティスを応用して、さらに複雑なアプリケーションを試してみましょう。次節では、本記事のまとめを行います。

まとめ

本記事では、ReactのuseEffectを活用して親コンポーネントから子コンポーネントへのデータ変更を検知し、動的な処理を行う方法を解説しました。コンポーネント間の通信の基本から始まり、useEffectの基本的な使い方、実践例、注意点、デバッグ方法、そして演習問題まで、包括的に取り上げました。

親コンポーネントから渡されるpropsの変更を適切に監視することで、動的でインタラクティブなUIを構築できることを学びました。また、無限ループやパフォーマンスの最適化といった実用的な課題にも対応する方法を確認しました。

useEffectの理解と応用は、Reactアプリケーション開発における重要なスキルです。この記事を通じて得た知識を活用し、さらに高度な機能を持つアプリケーションを構築してみてください。

React
React useEffect コンポーネント間通信 データ変更検知

コメント

コメントする

目次