react-data-fetching

Coordinate React data fetching with TanStack Query or SWR for caching and deduplication.

Updated Oct 26, 2025

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

Ready to run

npx skills add https://github.com/jcsoftdev/pulzifi-back --skill react-data-fetching-jcsoftdev

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

In complex React apps, many components fetch data independently, causing repeated requests, waterfalls, and stale UI. This skill introduces a centralized data-fetching approach using modern libraries to provide caching, deduplication, and reliable loading states.

Core Features & Use Cases

Data fetching patterns for React apps using TanStack Query, SWR, and Suspense.
Automatic caching, deduplication, retries, and background updates to keep UI responsive.
Use cases include dashboards, lists, and detail screens that require parallel data loading with consistent caches.

Quick Start

Install TanStack Query in your React project and replace simple fetch calls with a cached, declarative data layer.

Frequently Asked Questions about react-data-fetching

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

FAQPage Schema

How do I prevent data fetching waterfalls in React dashboards?▼

Preventing data fetching waterfalls in React involves coordinating parallel loads using a centralized data layer. This approach applies caching and deduplication across dashboards and detail pages to reduce sequential requests and stale UI.

What is the best way to set up caching and retries for React data fetching?▼

Setting up caching and retries for React data fetching involves integrating modern libraries like TanStack Query or SWR. These tools provide automatic caching, deduplication, and error handling with retries to keep the UI responsive.

Does React Suspense work with TanStack Query and SWR for data fetching?▼

Yes, React Suspense works with TanStack Query and SWR for data fetching. You can apply Suspense patterns alongside these libraries to handle loading states declaratively across parallel data loads while maintaining cache consistency.

How do I handle cache invalidation and optimistic updates in React?▼

Handling cache invalidation and optimistic updates in React requires a centralized data-fetching approach. By applying libraries like TanStack Query or SWR, you manage background updates and cache invalidation to keep the UI reliable and responsive.

Why are my React components fetching the same data independently and causing stale UI?▼

React components fetch the same data independently and cause stale UI when lacking a centralized data layer. Applying modern fetching libraries introduces automatic deduplication and caching to resolve repeated requests and ensure consistent UI states.