skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

state-handling

Standardize loading, error, empty, and data states in React with TanStack Query.

Updated Aug 23, 2026
Search Tags:#suspense#react#error-handling#hydration#tanstack-query#loading-states#server-prefetch
One-click install
npx skills add https://github.com/leonardoacosta/central-claude --skill state-handling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: state-handling
Source: https://github.com/leonardoacosta/central-claude/tree/main/skills/state-handling
Command: npx skills add https://github.com/leonardoacosta/central-claude --skill state-handling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standard patterns for loading, error, and empty states in React apps using TanStack Query, reducing boilerplate and ensuring consistent UX across data-driven components.

Core Features & Use Cases

  • Standardized handling for Loading → Error → Empty → Data across components.
  • Supports Skeleton, ErrorState, and EmptyState components, plus mutation state and Suspense boundaries.
  • Server prefetch with HydrateClient and React.cache() deduplication to optimize SSR/CSR data fetching.

Quick Start

Apply the ready-made loading, error, and empty state patterns to a data-fetching component in my React app.

Frequently Asked Questions about state-handling

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

FAQPage Schema
How do I handle loading and error states consistently in React with TanStack Query?▼

Handle loading and error states in TanStack Query by enforcing a canonical Loading → Error → Empty → Data sequence. This pattern uses Skeleton, ErrorState, and EmptyState components to ensure consistent UX across data-driven React components.

What is the best way to prevent hydration mismatches when server prefetching data in React?▼

Prevent hydration mismatches during React server prefetching by utilizing HydrateClient and React.cache() deduplication. This ensures safe, SSR-friendly rendering by synchronizing server-fetched data with the client hydration process.

How do I structure Suspense boundaries for parallel data fetching in React?▼

Structure parallel Suspense boundaries by wrapping independent data-fetching components to suspend concurrently. This allows multiple asynchronous requests to resolve in parallel, reducing sequential loading waterfall delays.

Can I use this approach to manage mutation state alongside standard loading skeletons?▼

Yes, you can manage mutation state alongside standard loading skeletons. The pattern supports mutation state tracking while maintaining the canonical Loading, Error, Empty, and Data rendering sequence for data-driven components.

Why does my React component flash an empty state before data finishes loading?▼

A React component flashes an empty state before loading finishes when the rendering sequence skips the loading check. Enforcing the strict Loading → Error → Empty → Data guardrail ensures skeletons render first, preventing premature empty state displays.

Related Skills

Explore More Software Engineering Skills→
MileniumTickMileniumTick

tanstack-query-best-practices

Codify TanStack Query best practices for React data fetching and server state.

Community
Advanced
lintendolintendo
152

ant-design

Identify optimal Ant Design 6.x component usage and configuration choices.

Community
Advanced
atilladenizatilladeniz
2

data-fetching

Enforce Orval-generated API wrappers with TanStack Query HydrationBoundary for data fetching.

Community
Intermediate
OpenAEC-FoundationOpenAEC-Foundation
4

solid-errors-error-handling

Handle SolidJS rendering and reactive errors with ErrorBoundary and Suspense.

Official
Advanced