react-data-fetching

Fetch, cache, and synchronize server data in React applications with TanStack Query.

Updated Apr 28, 2026

Search Tags:#suspense #caching #react #tanstack-query #data-fetching #parallel-loading

Ready to run

npx skills add https://github.com/PMKhai/claude-config --skill react-data-fetching-pmkhai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-data-fetching
Source: https://github.com/PMKhai/claude-config/tree/main/skills/react-data-fetching
Command: npx skills add https://github.com/PMKhai/claude-config --skill react-data-fetching-pmkhai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Production-ready patterns for fetching, caching, and synchronizing server data in React applications. These patterns are framework-agnostic and work across Vite + React Router, Next.js, Remix, or custom setups to reduce waterfalls, duplicate requests, and stale data.

Core Features & Use Cases

Parallelize independent fetches with Promise.all to reduce loading time.
Defer awaiting values to start work earlier and avoid blocking on data you don't need yet.
Use TanStack Query for client-side caching, deduplication, retries, and automatic loading states.
Implement Suspense boundaries for declarative loading and streaming data.
Prefetch data before navigation to minimize page transitions.

Quick Start

Install TanStack Query and replace your component-level fetch with useQuery to enable caching, deduplication, and automatic loading states.

Frequently Asked Questions about react-data-fetching

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is the best way to handle data fetching and caching in React?▼

Using TanStack Query for data fetching enables automatic client-side caching, request deduplication, and retries. You should also use Suspense boundaries to handle declarative loading and stream data efficiently.

How do I parallelize data fetches in React to reduce loading time?▼

To parallelize data fetches in React, use Promise.all to trigger independent requests simultaneously. Deferring awaited values starts work earlier, avoiding unnecessary blocking and reducing overall loading time.

Does TanStack Query work with Vite, Next.js, and Remix for data synchronization?▼

Yes, TanStack Query works across Vite with React Router, Next.js, and Remix. It provides framework-agnostic client-side caching, data synchronization, and offline capabilities for your React application setup.

How do I implement Suspense for React data fetching?▼

Implement Suspense for React data fetching by wrapping components in Suspense boundaries and using TanStack Query's suspense support. This provides declarative loading states and enables streaming data as it becomes available.

Can I prefetch data before navigation in React Router?▼

Yes, you can prefetch data before navigation in React Router. Prefetching minimizes page transition times by loading necessary data before the route renders, improving perceived application performance.

How to avoid duplicate requests and waterfalls when fetching server data in React?▼

Avoid duplicate requests and waterfalls by replacing component-level fetch calls with TanStack Query's useQuery. This enables automatic request deduplication and allows parallel loading of independent data fetches.