Getting Started
Guides & Concepts
API Reference
Community Resources

Window Focus Refetching

If a user leaves your application and returns and the query data is stale, TanStack Query automatically requests fresh data for you in the background. You can disable this globally or per-query using the refetchOnWindowFocus option:

Disabling Globally

const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false, // default: true
function App() {
return <QueryClientProvider client={queryClient}>...</QueryClientProvider>

Disabling Per-Query

queryKey: ['todos'],
queryFn: fetchTodos,
refetchOnWindowFocus: false,

Custom Window Focus Event

In rare circumstances, you may want to manage your own window focus events that trigger TanStack Query to revalidate. To do this, TanStack Query provides a focusManager.setEventListener function that supplies you the callback that should be fired when the window is focused and allows you to set up your own events. When calling focusManager.setEventListener, the previously set handler is removed (which in most cases will be the default handler) and your new handler is used instead. For example, this is the default handler:

focusManager.setEventListener((handleFocus) => {
// Listen to visibilitychange
if (typeof window !== 'undefined' && window.addEventListener) {
window.addEventListener('visibilitychange', () => handleFocus(), false)
return () => {
// Be sure to unsubscribe if a new handler is set
window.removeEventListener('visibilitychange', () => handleFocus())

Managing Focus in React Native

Instead of event listeners on window, React Native provides focus information through the AppState module. You can use the AppState "change" event to trigger an update when the app state changes to "active":

import { AppState } from 'react-native'
import { focusManager } from '@tanstack/react-query'
function onAppStateChange(status: AppStateStatus) {
if (Platform.OS !== 'web') {
focusManager.setFocused(status === 'active')
useEffect(() => {
const subscription = AppState.addEventListener('change', onAppStateChange)
return () => subscription.remove()
}, [])

Managing focus state

import { focusManager } from '@tanstack/react-query'
// Override the default focus state
// Fallback to the default focus check
Want to Skip the Docs? - The Official React Query Course
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner Linsley
Check it out
scarf analytics