How to stop component reloading , when there are no change in api response.

[sanpanthera]

Currently on window focus component is reloading after every api call. I want to reload the component on window focus only when there is the change in data.

[the-homeless-god]

@tannerlinsley could you please provide any solution here?

[the-homeless-god]

@sanpanthera you can find all requested documentation here https://react-query.tanstack.com/guides/window-focus-refetching

[the-homeless-god]

@sanpanthera

short-answer:

• for global usage

const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
     },
   },
 })

• for local usage

 useQuery('todos', fetchTodos, { refetchOnWindowFocus: false })

[TkDodo]

I want to reload the component on window focus only when there is the change in data.

when refetching, the component transitions to isFetching:true and then back to false again. You can optimize re-renders with notifyOnChangeProps, but usually, it shouldn’t matter.