●目次
useEffectは、Reactのコンポーネントが持つ「副作用」を管理するためのフックで、useStateと並んで非常に重要なフックの一つです。
副作用とは、コンポーネントがレンダリングされるたびに発生する、データの取得やDOMの操作、サブスクリプションなどの処理を指します。
useEffect フックとは？
コンポーネントのレンダリング結果に影響を与える処理を実行するために使用されます。
通常、以下の3つのタイミングで副作用が実行されます。
- クリーンアップ時：
コンポーネントが非表示または再レンダリングされる直前にクリーンアップ（副作用解除）を行うとき - 初回レンダリング後：
最初にコンポーネントが表示されたとき - 再レンダリング後：
依存する値（依存配列）が変更されたとき
useEffectの基本構文
useEffectの基本的な構文は以下の通りです。
useEffect(() => {
// 副作用の処理
return () => {
// クリーンアップ処理（必要に応じて）
};
}, [依存配列]);- 第一引数:
副作用の処理を記述する関数 - 第二引数（依存配列）:
この配列内の値が変更されたときに副作用が再実行されます。
配列が空の場合、初回レンダリング時のみ実行されます。
useEffectの使い方
コンポーネントが初回レンダリング時に実行
useEffectは、依存配列を空にすることで、コンポーネントが初回レンダリングされたときのみ実行されます。
これにより、ページロード時やコンポーネントの最初の描画時に一度だけ実行したい処理が書けます。
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log('コンポーネントがマウントされました');
}, []); // 空の依存配列
return <div>Hello World!</div>;
}データ取得の例
APIからデータを取得する際にも、useEffectが便利です。
通常、データの取得は非同期処理で行うため、async関数を使います。
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};
fetchData();
}, []); // 初回のみ実行
return (
<ul>
{data.map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
);
}依存配列の理解
useEffectの依存配列には、「指定した値が変更されたときのみ副作用の処理を実行する」という役割があります。
例えば、カウンターが変わるたびにuseEffectを実行したい場合、依存配列にカウンターの状態（count）を指定します。
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`カウントが${count}に変わりました`);
}, [count]); // countが変更されるたびに実行
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}クリーンアップ処理
useEffectでは、コンポーネントが削除される前や依存する値が変更される前にクリーンアップ処理を行うこともできます。
これは、タイマーやイベントリスナーなどの不要なリソースを解放するのに便利です。
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
// useEffect
useEffect(() => {
const interval = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
// クリーンアップ処理
return () => clearInterval(interval);
}, []); // 初回のみ実行
return <div>Timer: {count}</div>;
}この例では、コンポーネントが削除されるときにclearIntervalが呼ばれ、タイマーが停止されます。
まとめ
useEffectは副作用の管理に使う。- 初回のみ実行したい場合は依存配列を空にする。
- 特定の値に依存する場合は依存配列に値を指定する。
- クリーンアップ処理でリソースを解放することができる。
useEffectを適切に活用すると、データ取得やリアルタイム処理など、複雑なアプリケーションの動作を簡潔に管理できるようになります。