ReactJS: функция запускается несколько раз без вызова

Question

Есть ли какая-либо причина, по которой функция в реагирующем компоненте будет запускаться несколько раз, хотя она вызывается только один раз?

У меня есть эта тестовая функция, которая автоматически вызывает себя, как в:

  let xfunction = (() =>
   {
     console.log('test');
   }
  )();

Вот что я получаю в консоли:

Приложение. js Исходный код:

import React, { useState, useEffect } from 'react';
import { getAllPokemons } from './services/pokemon'
import './App.css';
function App() {


  const [pokemonData, setPokemonData] = useState([]);
  const [loading, setLoading] = useState(true);
  const initialUrl = 'payload.json'


  useEffect(() => {
    async function fetchData() {
      let response = await getAllPokemons(initialUrl);
      console.log(response);
      await loadingPokemon(response.pokemon);
      setLoading(false);
    }
    fetchData();

  }, [])

  const loadingPokemon = async (data) => {
    let _pokemon = await Promise.all(data.map(async pokemon => {
      return pokemon;
    })
    );
    setPokemonData(_pokemon);
  }




  // Start - Filter by Pokemon Type
  let pokemonTypes = (() =>
   {
    console.log('test');
   }

  )();



// End - Filter by Pokemon Type

  return (

    <div></div>

  );


}

export default App;

Функция не вызывается или ссылки где-либо еще!

Спасибо!

Answer 1

Решение, предложенное @Jared Smith:

Если вы не хотите, чтобы ваши функции перерисовывались, и вы используете перехватчики реагирования, пожалуйста, включите их в перехватчик useEffect, как в:

  useEffect(() => {
    async function fetchData() {
      let response = await getAllPokemons(initialUrl);
      await loadingPokemon(response.pokemon);
      setLoading(false);
    }
    fetchData();
    includeFunctionHere();

  }, [])