ReactのuseEffectでデータ渡し時の1回だけコンポーネント動作させる

2023年7月8日

URLをコピーしました！

ReactのuseEffectフックは、コンポーネントがマウントされた後や更新された後に特定の副作用を実行するために使用されます。
本記事では、useEffectを使ってデータが渡された時に1回だけ動作するコンポーネントの作成方法を紹介します。
具体的なソースコードを示しながら、useEffectが2回以上呼ばれないように注意点も解説します。

useEffectを使用したコンポーネントの作成

まず、データを渡す側と渡される側のコンポーネントを作成します。

データを渡す側のコンポーネント

import React, { useState } from 'react';

function DataSender() {

const [data, setData] = useState('Initial data');

// データを渡す処理

const sendData = () => {

const newData = 'New data';

setData(newData);

};

return (

<div>

<button onClick={sendData}>データを送信</button>

</div>

);

}

export default DataSender;

データを渡される側のコンポーネント

import React, { useEffect } from 'react';

function DataReceiver({ data }) {

useEffect(() => {

// データ受け取り時に実行される処理

console.log('データが受け取られました:', data);

// ここに処理を追加

}, [data]); // dataが変更された時だけ再実行される

return <div>データ受け取り側のコンポーネント</div>;

}

export default DataReceiver;

上記のコードでは、DataSenderコンポーネントがデータを管理し、DataReceiverコンポーネントにデータを渡しています。
DataSenderコンポーネント内のsendData関数が実行されると、データが変更され、それがDataReceiverコンポーネントに渡されます。

useEffectが2回以上呼ばれないようにする

データを渡される側のコンポーネントで、useEffectが2回以上呼ばれないようにするために、依存配列（Dependency Array）を指定します。
依存配列は、useEffectが監視する変数の配列であり、この配列内の変数が変更された場合にのみuseEffectが再実行されます。

上記のコードでは、[data]という依存配列を指定しています。
これにより、dataが変更された時だけuseEffect内の処理が実行され、2回以上呼ばれることはありません。

追加の対策: 非同期処理が含まれる場合

もし、useEffect内の処理が非同期である場合、または非同期処理を含む場合は追加の対策が必要です。
非同期処理が含まれる場合、useEffectのコールバック関数を非同期関数として定義して非同期処理を行います。
以下はその例です。

useEffect(() => {

// 非同期処理を含む場合のコード例

const fetchData = async () => {

try {

const response = await fetch('https://api.example.com/data');

const data = await response.json();

console.log('データが受け取られました:', data);

// ここに非同期処理後の追加処理を追加

} catch (error) {

console.error('データの取得に失敗しました:', error);

}

};

fetchData();

}, [data]);

上記のコードでは、非同期処理を含む場合に使用するfetchData関数が定義されています。
非同期処理が完了した後に追加の処理が必要な場合は、そのコードをfetchData関数内に追加してください。

まとめ

ReactのuseEffectフックを使ってデータが渡された時に1回だけ動作するコンポーネントを作成する方法を紹介しました。
データを渡す側と渡される側のコンポーネントのソースコードを示し、useEffectが2回以上呼ばれないようにするための依存配列の指定方法も説明しました。
さらに、非同期処理を含む場合の対策についても解説しました。

この方法を実践することで、データの一貫性を保ちつつ、効率的なコンポーネントの動作を実現できます。