17 — Data Fetching Patterns

Comprehensive patterns for fetching data in React — from basic fetch to SWR-style caching. Covers error handling, loading states, race conditions, and real-world patterns.

Fetching Strategies

Strategy	Use Case	Example
useEffect + fetch	Simple one-off fetches	Quick prototypes
Custom useFetch hook	Reusable fetch logic	Medium apps
TanStack Query / SWR	Caching, background sync	Production apps
Suspense + use()	Future React pattern	React 19+
Server Components	SSR/SSG data loading	Next.js / Remix

Common Challenges

Challenge	Solution
Race conditions	AbortController or ignore flag
Loading skeletons	Suspense boundaries or loading state
Error recovery	Error boundaries + retry
Stale data	Background refetch, SWR pattern
Waterfall requests	Parallel fetching, prefetching
Optimistic UI	Update cache before server confirms

File

• data-fetching.tsx — fetch patterns, SWR, error handling, loading states, parallel fetching, retry logic, abort patterns