カスタムフック内の処理が異常な回数行われる

Question

ローカルストレージからトークンを取得してaxiosクライアントのリクエストヘッダに含める処理をカスタムフックで行なっているのですが、リクエストヘッダの設定処理が１回のページアクセスで200回から300回ほど行われてしまいます。

useAxiosはAPIからデータを取得する別のカスタムフックであるuseQuotesで呼び出されています。トップレベルでuseQuotesが呼び出されているページにアクセスすると上記の問題が生じます。

各hooksの実行回数を調べてみたのですが、useAxiosもuseQuotesも数回しか呼び出されていないにも関わらず、トークン設定処理だけが過剰な回数行われているようです。

原因が思い浮かばず質問させていただきました。分かる方いらっしゃいましたらアドバイスを頂けると助かります。

// useAxios.ts
import axios, { AxiosError, AxiosResponse } from "axios";
import { useAuthMethods } from "./useAuthMethods";

export const useAxios = () => {
  const { signout } = useAuthMethods();

  console.log("useAxios"); // 数回

  axios.defaults.baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;

  axios.interceptors.request.use((config) => {
    const token = localStorage.getItem("token");
    console.log(token); // 200から300回
    config.headers = Object.assign(
      { Authorization: `Bearer ${token}` },
      config.headers
    );
    return config;
  });

  const onSuccess = (response: AxiosResponse<any>) => response;
  const onError = (error: AxiosError) => {
    switch (error.response?.status) {
      case 401:
        signout();
        return;
    }
  };
  axios.interceptors.response.use(onSuccess, onError);

  return { customAxios: axios };
};

// useQuotes.ts
import { useContext, useState } from "react";
import { QuotesContext } from "../context/QuotesContext";
import { useAxios } from "./useAxios";
import { useEffectAsync } from "./useEffectAsync";

export const useQuotes = (tags: string[]) => {
  console.log("useQuotes");
  const { quotes, setQuotes } = useContext(QuotesContext);
  const [loading, setLoading] = useState<boolean>(false);
  const { customAxios } = useAxios();

  useEffectAsync(async () => {
    setLoading(true);
    const url = "..."
    const response = await customAxios.get(url);
    if (response?.data) {
      setQuotes(response.data);
    }
    setLoading(false);
  }, [tags]);

  return { quotes, loading };
};

// index.tsx
interface Props {
  registeredTags: string[];
}

const Index: NextPage<Props> = ({ registeredTags }) => {
  const [addedTags, setAddedTags] = useState<string[]>([]);
  const { quotes, loading } = useQuotes(addedTags);
  const { user, loading: userLoading } = useAuth();

  console.log("index");

  useEffect(() => {
    if (!user && !userLoading) {
      router.push("/login");
    }
    return;
  }, [user, userLoading]);

   （略）

  return (
    <>

    （略）

    </>
  );
};


export default Index;

// useEffectAsync.ts
import { useEffect, DependencyList } from "react";

export const useEffectAsync = (effect: () => any, deps?: DependencyList) => {
  useEffect(() => {
    effect();
  }, deps);
};

結果

  const instance = axios.create({
    baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
  });

  instance.interceptors.request.use((config) => {
    const token = localStorage.getItem("token");
    config.headers = Object.assign(
      { Authorization: `Bearer ${token}` },
      config.headers
    );
    return config;
  });

上のようにaxiosインスタンスに関数を登録するように変更したところ、異常な関数実行はなくなりました。

Comments

[maisumakun]

Indexコンポーネント内に「const { quotes, loading } = useQuotes(addedTags);」とありますが、addedTagsはどこから来ているものでしょうか？

[maskmelon]

useStateです。一部省略したときに消してしまったようです。申し訳ありません。
タグを指定して取得するデータを絞ることができるようにしているのですが、初期値の空配列の状態でも問題は発生します。

[maisumakun]

useEffectAsyncはどのようなコードでしょうか？

[maskmelon]

追加させていただきました。引数に非同期関数を入れるとuseEffect内で実行するようになっています。

[maisumakun]

useEffectAsyncに仕掛けた関数内でlogを出してみたら、どの程度出るでしょうか？

（useEffectAsync自体が何度も実行されているのか、それともaxios側だけ増えているのか見分けられるかと思います）

[maskmelon]

一回のページアクセスで表示されるログの画像を載せました。useQuotes, useAxios, useEffectAsyncは同じタイミングで実行されているようです。
データフェッチの終了後にトークンのログのカウントが異常なスピードで増えて、その後もう一度レンダリングの上書き？でストップするような感じです。

Answer 1

useAxiosが呼ばれるたびに、グローバルなaxiosへ何度もaxios.interceptors.request.useが行われて、結果1回のリクエストに対してトークンの付与処理が何度も何度も行われることとなってしまった、ということではないでしょうか。

Comments

[maisumakun]

グローバルなaxiosを書き換えるのではなく、axios.create()で作った新たなインスタンスをカスタマイズして、それをstateあるいはrefに格納して使う、という流れが適当かと思います。

https://github.com/axios/axios#creating-an-instance

[maskmelon]

`axios.interceptors.request.use`は関数の登録処理なので、各所で`useAxios`を呼ぶ度に蓄積されて、リクエスト時にまとめて実行されてしまう、ということでしょうか。そう考えると確かに納得です。
`axios`のクライアントをグローバルステートで一つだけ保持してそこにアクセスすれば解決できそうです。試してみます。

[maskmelon]

参考情報もありがとうございます。的確な回答感謝です。