How to refetch only if stale during screen focus in react native?

[heisenbugged]

We use React Query heavily in our React Native app, but there’s one pain point we haven’t found a clean solution for yet.

The official docs suggest a small useEffect snippet that hooks into react-navigation to refetch queries whenever a screen comes into focus. In certain contexts (like our home screen), this behavior is critical for keeping data fresh. Unfortunately, we’ve run into a couple of persistent issues with this approach:

---

a) Double-fetching in dev (strict) mode
Because the recommended snippet is wrapped in a useEffect, React runs it twice in development strict mode. And since refetch() refetches indiscriminately (unlike most of React Query), any queries marked with useRefreshOnFocus end up firing twice.
It’s not a production issue, but it does create phantom performance problems locally and generally makes development more annoying.

---

b) It sidesteps React Query’s built-in protections
The bigger issue is that calling refetch() this way bypasses React Query’s normal safeguards. If two different hooks mount the same query with useRefreshOnFocus, they’ll both fire a request — leading to duplicate queries in production (and quadruple in dev mode).
Yes, developers could avoid this with discipline, but it’s not intuitive. React Query’s whole model is that it manages subscriptions for you, yet here we’re forced to manually guard against duplicate fetches.

---

The docs do mention query filters, but in my experience they either don’t behave as expected in this React Native scenario, or they just don’t solve this particular problem.

Has anyone else tackled this more cleanly?

[imadselka]

instead of calling refetch() everywhere, do:

  queryClient.refetchQueries({ stale: true, type: 'active' })

This way only queries older than their staleTime will refetch.

#4016

[TkDodo]

we can also update the docs towards that if you want to file a PR