副作用（データ取得・DOM操作・イベント登録など）をコンポーネントのレンダー後に実行する。クリーンアップ関数を返すことで後処理もできる。
useEffect(setup, dependencies?)
useEffect(() => {
// 副作用
return () => { /* クリーンアップ */ };
}, [dep1, dep2]);import { useState, useEffect } from 'react';
function UserProfile({ userId }: { userId: number }) {
const [user, setUser] = useState<User | null>(null);
useEffect(() => {
// AbortControllerでクリーンアップ
const controller = new AbortController();
fetch(`/api/users/${userId}`, { signal: controller.signal })
.then(r => r.json())
.then(setUser)
.catch(err => {
if (err.name !== 'AbortError') console.error(err);
});
// クリーンアップ: コンポーネントがアンマウントされるか
// userId が変わったときにリクエストをキャンセル
return () => controller.abort();
}, [userId]); // userId が変わるたびに再実行
return <div>{user?.name ?? '読み込み中...'}</div>;
}React 18のStrictModeでは開発環境でエフェクトが2回実行される。クリーンアップ関数を正しく実装していれば問題ない。