react-fetch-cache-patterns

name

react-fetch-cache-patterns

description

React data-fetching patterns at scale — recommender carousels, infinite feeds, pages with many parallel fetches, dashboards. Covers request orchestration (parallelism, batching, deduplication), cache strategy (keys, normalization, staleTime, SWR), backend protection (concurrency caps, debounce/throttle, jittered retries, circuit breakers), prefetching (route loaders, hover/intent, idle, server hydration), failure resilience (AbortController, timeouts, error boundaries, stale fallback, idempotent mutations), and feed/carousel patterns (virtualization, cursor pagination, summary/detail split). Includes 5 ready-to-use scaffolding templates (resource query hook, carousel data loader, infinite feed, hover-prefetch link, request collapser). Trigger when building, reviewing, or refactoring React components that fetch data — even if the user doesn't explicitly mention "performance" or "scale".

Experimental React Data Fetching & Caching Best Practices

Implementation patterns for React applications that fetch and cache many API requests without overwhelming the backend. 48 rules across 8 categories, ordered by execution lifecycle impact — earlier categories cascade through everything downstream. Templates show both library-based (TanStack Query, SWR) and library-free (pure React + AbortController) implementations so the patterns are usable regardless of stack constraints.

When to Apply

• Writing or reviewing a React component that calls fetch, useQuery, useSWR, or any data-fetching hook
• Designing a list, feed, or carousel that displays many items each requiring data
• Investigating "the backend is getting hammered" or "the page loads slowly" symptoms
• Choosing between client-side fetching, route loaders, server components, or SSR
• Implementing prefetch, retry, optimistic updates, or any failure-handling logic
• Refactoring code that already does data fetching but with waterfalls, no cache strategy, or no concurrency limits