「useEffectの乱用」を避けよう

2025年5月26日2025年5月27日

🔰 useEffectって何？

useEffect は「副作用（= side effect）」を扱うための仕組み（フック）です。

基本の書き方

useEffect(() => {
  // ここが「副作用」処理（エフェクト本体）

  return () => {
    // ここが「クリーンアップ」（必要なときだけ）
  }
}, [依存配列])

「副作用」ってそもそもなにかというと、「コンポーネントの表示そのもの（UI）とは直接関係ない処理」のこと。

データを取得したい
タイマーを使いたい
イベントを監視したい（スクロールとか）
外部のライブラリを動かしたい

そのエフェクトは不要かも
https://ja.react.dev/learn/you-might-not-need-an-effect

依存配列とは？

useEffectが「いつ再実行されるか」をReactに伝えるための「リスト」

ページ読み込み時に1回だけデータを取得したい

useEffect(() => {
  fetch('/api/posts').then(...)
}, []) // ← 初回だけ実行

propsが変わったら処理を実行したい

useEffect(() => {
  console.log('userIdが変わったよ')
}, [userId])

複数の変数に反応したい

useEffect(() => {
  console.log(`filter:${filter}, sort:${sort}`)
}, [filter, sort])

依存配列なし（非推奨）＝毎レンダー発火

useEffect(() => {
  console.log('これは毎回実行される💥')
})

関数を依存にしたいときはuseCallbackでメモ化

const fetchData = useCallback(() => {
  fetch('/api/data')
}, []) // ← useCallbackで定義

useEffect(() => {
  fetchData()
}, [fetchData]) // ← 安心して依存にできる！

実例：WordPressをヘッドレスCMSとして、コンテンツを取得してReactでフロントを表示する際に、取得した内容の目次にスムーススクロールを実装したい

なぜuseEffectを使用したか？

JSXじゃないから <a onClick={…} が書けない
HTMLが描画される前に .querySelector しても見つからないため、「描画された後」に処理したい

WordPressの目次HTML文字列
          ↓
   Next.jsで <TOCScroll content={...} />スムーススクロールのuseEffectを含むコンポーネント
          ↓
   parse()でHTMLを表示 ← ※このタイミングではイベントなし
          ↓
【useEffect発動】→ JSでイベント追加 → スムーススクロール