Level 51
First format your code following that guide
useEffect is being called twice in the development restrict mode. That doesn't happen on production.
1 like
Aug 6, 2022
9
Level 1
Function fetching data using axios in useEffect hook gets called twice despite the dependency array and adding the function as dependency
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
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?
Level 1
@MohamedTammam Followed the format, thanks! I tried removing the restrict mode and the useEffect is called once, thanks. But, for some reason, the second problem of receiving the same multiple data is not fixed. Do you have any thoughts?
Level 51
@youngjun827 I believe it's because you're passing getPokemons method in the dependencies array. React uses shallow object comparison to determine if a value updated or not. it might have the same value but it's a different object.
Use an empty array for dependencies to execute it once.
useEffect(() => {
getPokemons();
}, [])
1 like
Level 1
@MohamedTammam Thank you again for your response. I tried it again without a getPokemons method in the dependencies array. Same problem. Sigh... :((((
Level 51
@youngjun827 re-run the server and do a hard refresh on the browser. And look in the network tab in the dev-tool, see if the request being sent more then once or it's just the console.log statement that's being run more than once.
1 like
Level 1
@MohamedTammam I thought inspecting the network tab in the dev-tool would provide some solution yet, everything looks perfect there. The data is being fetched once and thus returns data once. This contradicts the console.log that I am seeing in the dev-tools console where I see the same multiple data getting returned.
Level 102
@youngjun827 if I understand you correctly the console.log is outside of the useEffect? A rerender of a component is not the same as a new request of the data. Every time the component rerenders, and console.log calls outside of functions or useEffect are run
Level 51
@youngjun827 That's good, now the issue is with the component being rendered multiple times, you can check what states in the component or its parents that changes.
1 like
Level 102
@youngjun827 please remember to mark the answer by @mohamedtammam that solved the problem as best :)
2 likes
Please or to participate in this conversation.