[React]axiosの処理が繰り返し、呼び出される問題

コンポーネント内で定義したstateをaxiosのresponseデータを使って書き換える処理を書きましたが、console.log()で取ってみると何度もresponseが返ってくる事象。。。

        const [posts, setPosts] = useState([]);

        axios
            .get('/api/posts')
            .then(response => {
                setPosts(response.data);
                console.log(posts)   //何度も通信が走っていることを確認

            })
            .catch(() => {
                console.log('通信に失敗しました');
            });

下記で解決しました。

    useEffect(() => {
        getPostsData();
    },[])

    function getPostsData(){
        axios
            .get('/api/posts')
            .then(response => {
                setPosts(response.data);

            })
            .catch(() => {
                console.log('通信に失敗しました');
            });
    }

axiosの処理を関数化し、第２引数を[]にすることで、空配列が渡ってきたときのみ、処理が走るようにします。

やはり公式、、、

空の配列 [] を渡すと、この副作用がコンポーネント内のどの値にも依存していないということを React に伝えることになります。つまり副作用はマウント時に実行されアンマウント時にクリーンアップされますが、更新時には実行されないようになります。