Function fetching data using axios in useEffect hook gets called twice despite the dependency array and adding the function as dependency

Question

I have a function fetching data through Axios in the zustand store:

import create from 'zustand'
import axios from "axios";

export const useStore = create((set) => ({
    pokemons: [],
    eachPokemon: {},
    getPokemons: async () => {
        const response = await axios.get('https://pokeapi.co/api/v2/pokemon')
        set({ pokemons: await response.data.results })
    },
    getPokemon: async(pokemonURL) => {
        const response = await axios.get(pokemonURL)
        set({ eachPokemon: await response.data})
    }
}))

The functions called in the useEffect hooks:

import React, {useEffect} from 'react'
import { useStore } from '../../store/store'

import ItemDetails from './ItemDetails'

function Items() {
  const {pokemons, getPokemons} = useStore((state) => ({
    pokemons: state.pokemons,
    getPokemons: state.getPokemons
  }))

  useEffect(() => {
    getPokemons();
    console.log(pokemons)
  }, [getPokemons])


  return (
    <>
        Some code
    </>
  )
}

export default Items

The console.log in the 'Items' functional component's useEffect hook gets called twice.

Furthermore, when placing the console.log outside the useEffect hook, the data is returned multiple times.

import React, {useEffect} from 'react'
import { useStore } from '../../store/store'

import ItemDetails from './ItemDetails'

function Items() {
  const {pokemons, getPokemons} = useStore((state) => ({
    pokemons: state.pokemons,
    getPokemons: state.getPokemons
  }))

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

  console.log(pokemons)


  return (
    <>
       Some code
    </>
  )
}

export default Items

Edit: Here is what I see in my dev tools console for the code written above =

https://reactjs.org/link/react-devtools
Items.jsx:16 []
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Items.jsx:16 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Why is this happening and how can I receive the data once?

Is this in development? `useEffect` is always called twice in development with strict mode, to check for possible bugs. — super, Aug 06 '22 at 07:30
@super Yes it is in development. I tried to remove the strict mode tag in the index.js file yet, the same problem occurs. — Young Jun Joo, Aug 06 '22 at 07:42

score 2 · Answer 1 · answered Aug 06 '22 at 19:20

See what the new React Docs says:

“React intentionally remounts your components in development to help you find bugs like in the last example. The right question isn’t ‘how to run an Effect once’, but ‘how to fix my Effect so that it works after remounting’.

Usually, the answer is to implement the cleanup function. The cleanup function should stop or undo whatever the Effect was doing. The rule of thumb is that the user shouldn’t be able to distinguish between the Effect running once (as in production) and an effect → cleanup → effect sequence (as you’d see in development).”

Reference: https://beta.reactjs.org/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development

Function fetching data using axios in useEffect hook gets called twice despite the dependency array and adding the function as dependency

1 Answers1