useEffect 依存配列

はじめに

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

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

useEffect 依存配列

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

useEffectの基本形

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

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

依存配列の種類と動作

1. useEffect(() => { ... }, [])
   最初の1回だけ（マウント時）
   → 初回のデータ取得
   

2. useEffect(() => { ... }, [token])
   token の値が変わるたびに実行
   → ユーザーのログイン状態を監視
   

3. useEffect(() => { ... }, [a, b, c])
   a, b, c のどれかが変わったら実行
   → フォームの入力値を監視
   

4. 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]);

こうすることで、何がいいのか。

• ログインしているユーザーのみデータを取得できる。

• ユーザーごとに適切なデータを取得できる。

つまり、ログインユーザーが変わるたびに、最新のデータを取得できる仕様になっているってことです。
ユーザーによって、toke値が違うのでtokenを変えるたびに処理を実行する必要があるからなんです！
いろんなユーザーが正しくデータを取得するのにとても便利なんです！

さいご

今回は、useEffect 依存配列内容でした！
参考になりましたかね？
なったら嬉しいです！😎😎