Why is useQuery making my component re-render when I come back to the tab?

user_16235175 0
Viewed 1414

I'm using react-query library, and I looked it up, and useQuery can make your react component re-render because it has states, but the weird thing is that it re-renders when I change tabs (like, I go to youtube, then come back to my app and the component just re-renders). But it only happens with useQuery, and I don't understand why.

Edit: It also happens when I click my console and then click the app again

The code is very simple:

const { data } = useQuery("pokemon", () =>
    axios("https://pokeapi.co/api/v2/pokemon/")
);
console.log(data);

It's literally happening right now. Every time I go back to my app, it just logs the data again. I don't know what I'm missing

react-query axios react-hooks reactjs javascript
1 Answers

If you're using the react-query library, consider setting the refetchOnWindowFocus option to false

So your code should look like this

const { data } = useQuery("pokemon", () =>
    axios("https://pokeapi.co/api/v2/pokemon/"), 
    {
      refetchOnWindowFocus: false
    }
);
console.log(data);

You can also set a refetchInterval option in milliseconds to only refetch at certain time intervals

user_55894050
Related