useEffectでAPIからデータを取得した際に無限ループしてしまう理由がわからない

Question

前提・実現したいこと

React HooksからAPIを叩いて、ヘッダー通知の数を取得したい。
現在React Hooksを利用して、とあるアプリケーションを開発していて、各ページで使いまわしているヘッダーに未読通知の数を表示したいです。

その際に、ヘッダーコンポーネントから直接APIを叩けば全ページで共通の処理ができると思い、ヘッダーの useEffect() からAPIにアクセスしています。

その際、 useEffect() に第2引数を設定しているにもかかわらず、無限ループが発生してしまうため、間違っている部分をご指摘いただければと思います。

発生している問題・エラーメッセージ

APIをたたいている useEffect() が無限ループしてしまう。

該当のソースコード

ヘッダーコンポーネント

const HeaderComponent = (props) => {
  const { t, i18n } = useTranslation()
//未読通知は noticesに格納
  const [notices, setNotices] = useState(props.unreadNotices)
  console.log(props);

  console.log(notices);
  useEffect(() => {
    i18n.changeLanguage(props.lng)
  }, [i18n, props.lng]);

  const changeHandle = e => {
    props.langChange(e.value)
  }

  useEffect(() => {
// ここで無限ループが発生
    async function getNotices() {
      const results = await E2.getUnreadNotices(props.loginInfo.token)
      console.log(results);
      setNotices(results)
    }
    getNotices()
  }, [notices, props])

  const options = [
    { value: 'en', label: props.lng === 'en' ? 'English ✔️' : 'English' },
    { value: 'jp', label: props.lng === 'jp' ? '日本語 ✔️' : '日本語' },
  ]
  const unreadNoticeCount = notices ? <span className='header__notice-count'>{notices.length}</span> : ''
  let headerContents
...

API

export function getUnreadNotices(token) {
  return Axios({
    method: 'GET',
    url: `${apiHost}/api/v2/notice/unread`,
    headers: { Authorization: `Bearer ${token}` },
  })
    .then(function (res) {
      console.log(res.data);
      return res.data;
    })
    .catch(function (error) {
      console.log('ERROR!! occurred in Backend.');
      return error;
    });
}

試したこと

useEffectの第2引数を色々変更してみた

  useEffect(() => {
// ここで無限ループが発生
    async function getNotices() {
      const results = await E2.getUnreadNotices(props.loginInfo.token)
      console.log(results);
      setNotices(results)
    }
    getNotices()
  }, [])

  useEffect(() => {
// ここで無限ループが発生
    async function getNotices() {
      const results = await E2.getUnreadNotices(props.loginInfo.token)
      console.log(results);
      setNotices(results)
    }
    getNotices()
  }, [notices,props])

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
React: 16.12.0

Answer 1

こんにちは。useEffect の第2引数として渡す配列は、

• この配列の要素のうち、どれかが変わっていたら、第1引数に渡した関数が実行される

という意味になりますので、この配列の中に notices があると、noticesが変更されたときに、第1引数に渡した関数が実行されますが、この関数の中で(APIのリクエストのような）何らかの副作用の処理が行われて、その結果として setNotices が行われて再度 notices が変更されてしまうと無限ループの原因になります。ついては以下のように修正してみるといかがでしょうか？

- }, [notices, props])
+ }, [props.unreadNotices, props.loginInfo.token]

上記によって、props で渡される unreadNotices または loginInfo.token が変更されたときのみ、未読通知取得のAPIが呼ばれることになります。

• 参考: ja.reactjs.org/docs ヒント：副作用のスキップによるパフォーマンス改善

Comments

[uchida_yuma]

ご回答ありがとうございました！

useEffectの第2引数の意味を勘違いしていたため、ご解説いただいた内容が非常にわかりやすく大変ありがたいです。

[jun68ykt]

どういたしまして????問題が解決されたようで、よかったです????