TanStack Query

TanStack Query (still widely called React Query) is a library for server state: data your app shows but a backend owns. You describe a query with a key and a function that returns a promise, and the library handles caching, loading and error states, request deduplication, background refetching and retries.

const { data, isPending, error } = useQuery({
  queryKey: ['orders', userId],
  queryFn: () => fetch(`/api/orders/${userId}`).then((r) => r.json()),
});

Two screens that use the same queryKey share one request and one cache entry, and useMutation plus invalidateQueries refreshes affected data after a write. It is network-agnostic, so it works with fetch, axios, GraphQL clients or Supabase calls.

The React Native gotcha is that two of its best features are browser-driven and do nothing on mobile by default. “Refetch on window focus” listens for browser focus events, and “online” status comes from the browser’s connectivity events. On a phone you wire them to AppState and a network library yourself:

import { AppState } from 'react-native';
import { focusManager } from '@tanstack/react-query';

AppState.addEventListener('change', (status) => {
  focusManager.setFocused(status === 'active');
});

With that in place, returning to the app after an hour refreshes stale screens automatically; without it, users see hour-old data until they pull to refresh. Connectivity is wired the same way through onlineManager, typically fed by NetInfo.

Other things to know: staleTime defaults to zero, so data is considered stale immediately and refetched often, which is usually more traffic than you want on mobile; set it per query. The cache lives in memory, so for offline-first behaviour add a persister that writes it to device storage. See the TanStack Query React Native guide.