ReactでAPIを受け取る処理で無限レンダリングしてしまう

Question

前提・実現したいこと

Laravel APIをReactで受け取りmapメソッドでループ処理したいです。
ただ、Reactで受け取った値が、なぜか無限ループして429 (Too Many Requests)となり、エラーになってしまいます。

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

以下のコードでconsole.log(data)をしてみたところ、無限ループが発生してしまいます。
また、mapメソッドが表示されません。

該当のソースコード

[{"id":1,"name":"\u30ab\u30b9\u30bf\u30e0\uff08\u8eca\uff09","created_at":"2021-06-23T01:28:57.000000Z","updated_at":"2021-06-23T01:28:57.000000Z"},{"id":2,"name":"\u30ab\u30b9\u30bf\u30e0\uff08\u30d0\u30a4\u30af\uff09","created_at":"2021-06-23T01:28:57.000000Z","updated_at":"2021-06-23T01:28:57.000000Z"},{"id":3,"name":"\u677f\u91d1\u4fee\u7406\uff08\u8eca\uff09","created_at":"2021-06-23T01:28:57.000000Z","updated_at":"2021-06-23T01:28:57.000000Z"},{"id":4,"name":"\u677f\u91d1\u4fee\u7406\uff08\u30d0\u30a4\u30af\uff09","created_at":"2021-06-23T01:28:57.000000Z","updated_at":"2021-06-23T01:28:57.000000Z"},{"id":5,"name":"\u8eca\u8ca9\u58f2","created_at":"2021-06-23T01:28:57.000000Z","updated_at":"2021-06-23T01:28:57.000000Z"},{"id":6,"name":"\u30d0\u30a4\u30af\u8ca9\u58f2","created_at":"2021-06-23T01:28:57.000000Z","updated_at":"2021-06-23T01:28:57.000000Z"},{"id":7,"name":"\u8eca\u8cb7\u53d6","created_at":"2021-06-23T01:28:57.000000Z","updated_at":"2021-06-23T01:28:57.000000Z"},{"id":8,"name":"\u30d0\u30a4\u30af\u8cb7\u53d6","created_at":"2021-06-23T01:28:57.000000Z","updated_at":"2021-06-23T01:28:57.000000Z"},{"id":9,"name":"\u30ed\u30fc\u30c9\u30b5\u30fc\u30d3\u30b9\uff08\u8eca\uff09","created_at":"2021-06-23T01:28:57.000000Z","updated_at":"2021-06-23T01:28:57.000000Z"},{"id":10,"name":"\u30ed\u30fc\u30c9\u30b5\u30fc\u30d3\u30b9\uff08\u30d0\u30a4\u30af\uff09","created_at":"2021-06-23T01:28:57.000000Z","updated_at":"2021-06-23T01:28:57.000000Z"},

// 階層：/app/backend/resources/tsx/app.tsx
require('./../tsx/views/components/CategoryLists.tsx');

// 階層：/app/backend/webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .ts('resources/tsx/app.tsx', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .react();

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import ReactDOM from 'react-dom';

// typescript設定
type Category = {
    id: number;
    name: string;
    created_at: Date;
    updated_at: Date;
};

// React.VFC : 型定義
const CategoryLists: React.VFC = () => {

    // useStateを作成
    const [categories, setCategories] = useState<Category[]>([])

    // カテゴリーAPIを取得する
    const getCategories = async () => {
        const { data } = await axios.get<Category[]>('api/categories');
        console.log(data); // ← なぜか無限レンダリングしてしまう
        setCategories(data);
    }

    // getCategoriesを出力する
    useEffect(() => {
        getCategories()
    })

    // 本文
    return (
        // 出力
        <ul className="c-input__lists">
            { categories.map(category => { // ← 上手く表示されない
                <li key={category.id} className="c-input__list">
                    <input type="checkbox" />
                    <label>{category.name}</label>
                </li>
            }) }
            <li className="c-input__list">
                <input type="checkbox"/>
                <label>サンプル</label>
            </li>
            <li className="c-input__list">
                <input type="checkbox"/>
                <label>サンプル</label>
            </li>
            <li className="c-input__list">
                <input type="checkbox"/>
                <label>サンプル</label>
            </li>
            <li className="c-input__list">
                <input type="checkbox"/>
                <label>サンプル</label>
            </li>
        </ul>
    );
}

if (document.getElementById('categoryLists')) {
    ReactDOM.render(<CategoryLists />, document.getElementById('categoryLists'));
}

参考

以下のコードを参考に記述しました。
コピーしているので、問題ないと認識しているのですが、なぜかmapメソッドで出力されません。

https://www.youtube.com/watch?v=bqctWoscPgE&t=195s

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

typescript@4.3.4
Laravel Framework 8.48.0
@types/react 17.0.11
react 17.0.2
ts-loader ^9.2.3
typescript ^4.3.4

お力添えいただけると幸いです。

Comments

[hoshi-takanori]

useEffect に第二引数 [] が必要では。

[nanami0221]

おっしゃる通りでした。
いつも誠に有難うございます。

Answer 1

無限ループ

useEffectの第二引数が指定されていないため、renderされる度に実行される状態になっています。
※「データ読み込み」→「再render」→「データ読み込み」・・・の状態です

useEffectの第二引数を以下のように修正すればOKです。

useEffect(() => {
  getCategories()
}, [])

mapメソッドが表示されません。

map内でなにもreturnしていないためです。
下記のように修正して表示されますか？

{categories.map(category => { 
  return(
     <li key={category.id} className="c-input__list">
       <input type="checkbox" />
       <label>{category.name}</label>
     </li>
  )
})}

Comments

[nanami0221]

具体的に有難うございます。
いただいた通りに修正したところ、問題なく表示されました。

useEffectについて正しく理解できていないので、調べてみます。
また、動画ではreturnが記載されていないのに表示されている点が不明なので、そちらも合わせて調べてみます。

誠に有難うございました。