What is data fetching on mobile?
Data fetching is how your app talks to a backend: requesting data, caching it, showing loading and error states, and refreshing. TanStack Query (React Query) handles the hard parts — caching, deduping, background refetch — so you do not hand-roll it with effects and state.
Why it matters
Mobile networks are slow and unreliable, so loading states, retries, and caching
matter far more than on a fast desktop connection. A library that manages server
state correctly makes the app feel fast and resilient. Doing it by hand with
useEffect is where a lot of subtle mobile bugs come from.
What to learn
- Server state versus client state
- TanStack Query: queries, mutations, and the cache
- Loading, error, and success states
- Caching and background refetch
- Pull-to-refresh and refetch on focus
- Optimistic updates
- Handling flaky networks and retries
Common pitfall
Hand-rolling fetching with useEffect and useState for every screen —
manually tracking loading and error flags, with no caching or dedup. It is
verbose, buggy, and re-fetches constantly. A query library gives you caching,
deduplication, and refetch for free; reinventing it is wasted effort and a common
source of stale-data bugs.
Resources
Primary (free):
- TanStack Query — Overview · docs
- TanStack Query — React Native · docs
- React Native — Networking · docs
Practice
Fetch a list from an API with TanStack Query, rendering loading, error, and success states. Add pull-to-refresh that triggers a refetch, and a mutation that updates the server and invalidates the cache. Done when navigating away and back serves cached data instantly while refetching in the background.
Outcomes
- Distinguish server state from client state.
- Fetch with caching, dedup, and background refetch.
- Render loading, error, and success states.
- Add pull-to-refresh and optimistic updates.