useEffect 依存配列

投稿日: 2025年02月22日

学習振り返り

Tips

要約

useEffectは副作用を管理するReactのフックで、依存配列を使うことで特定の値が変わったときのみ処理を実行できる。
依存配列により、ログイン状態を監視したり、入力値の変化を捉えたりすることが可能であり、効率的なデータ取得が行える。
特にtokenを依存配列に指定することで、ログインユーザーごとに適切なデータを取得することができる。

はじめに

復習として、useEffect 依存配列内容となります！
間違っていたら、コメントいただけると嬉しです😎

よかったら、以下と一緒に読むことをお勧めします！
https://shiftb.dev/blog/ZdxFVvkaPonE

useEffect 依存配列

useEffectとは、コンポーネントがレンダリングされた後に実行される処理(副作用)を記述するReactのフック(関数)。
例: 「データの取得」「イベント登録」「タイマーの設定」など。

useEffectの基本形

useEffect(() => {
  // ここに副作用（APIの呼び出しなど）を書く
}, [依存配列]); // ← 依存配列を指定

依存配列とは、「この値が変わったときだけ、useEffect内の処理を実行する！」という条件を指定するための配列です。

依存配列の種類と動作

useEffect(() => { ... }, [])
最初の1回だけ（マウント時）
→ 初回のデータ取得
useEffect(() => { ... }, [token])
token の値が変わるたびに実行
→ ユーザーのログイン状態を監視
useEffect(() => { ... }, [a, b, c])
a, b, c のどれかが変わったら実行
→ フォームの入力値を監視
useEffect(() => { ... })
毎回レンダリング時に実行（推奨されない）
→ コンポーネントの状態を常に監視（非効率）

useEffect 依存配列の使用例

以下のコードでは、
useEffect の依存配列 [token] によって token が変わるたびに処理が実行されるが、
if (!token) return; によって未ログイン時は処理をスキップする。
これにより、ログインしているユーザーのみデータを取得できるようになっています。

useEffect(() => {
    if (!token) return;

    const fetcher = async () => {
      try {
        const response = await fetch("/api/admin/home", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization:  `Bearer ${token}`,
          },
        });

        if (response.ok) {
          const data = await response.json();
          if (data.cafe) {
            setData(data);
          }
        }

        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }
      } catch (error) {
        console.error("Error fetching data:", error);
        setError("データの取得に失敗しました。");
      }
    };

    fetcher();
  }, [token]);