React Hooks

useEffectライフサイクル

副作用の処理とクリーンアップ関数の使い方

クリーンアップ関数

コンポーネントのアンマウント時にリソースを解放

5:33:44

useEffect(() => {
  const intervalId = setInterval(() => {
    setTime(new Date());
  }, 1000);

  // クリーンアップ関数
  return () => clearInterval(intervalId);
}, []); // 空の依存配列

依存配列

特定の値が変更されたときに実行

useEffect(() => {
  // count が変更されるたびに実行
  console.log(`count: ${count}`);
}, [count]); // count を監視

イベントログ

useEffect の実行タイミングを確認

ログはありません

依存配列の種類

依存配列の指定方法による挙動の違い

空の配列 []

マウント時に1回だけ実行

useEffect(() => { ... }, []);

依存値あり [value]

value 変更時に実行

useEffect(() => { ... }, [value]);

配列なし

毎レンダー時に実行（非推奨）

useEffect(() => { ... });

Next Steps

次のステップ

Next.js の Server Components について学んでみましょう。

カタログを見る