ReactJS: Function run multiple times without being called

Question

Is there any reason a function in a react component would run multiple times although it is being invoked only once?

I have this test function that auto-invokes itself as in:

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

This is what I get in the console:

App.js Source Code:

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;

The function is not being called or references anywhere else!

Thanks!

Answer 1

Solution as proposed by @Jared Smith:

If you do not want your functions rerendered and you are using react hooks, please include them in the useEffect hook as in:

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

  }, [])