react-state-management

Manage React client state with Context API and server state with TanStack Query.

4|Updated Feb 16, 2017

Search Tags:#context #react #state-management #tanstack-query #server-state #optimistic-ui

Ready to run

npx skills add https://github.com/nekorush14/dotfiles --skill react-state-management-nekorush14

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-state-management
Source: https://github.com/nekorush14/dotfiles/tree/main/configs/claude/skills/react-state-management
Command: npx skills add https://github.com/nekorush14/dotfiles --skill react-state-management-nekorush14

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides patterns for separating client state (via Context) and server state (via TanStack Query), enabling scalable, maintainable frontend architectures.

Core Features & Use Cases

Context API for Client State: Global UI preferences, theme, and ephemeral state.
TanStack Query for Server State: Caching, invalidation, and optimistic updates.
State Normalization: Structured, efficient updates across components.
Custom Hooks: Reusable accessors for state and data.

Quick Start

Create a ThemeProvider with a custom hook (useTheme) and wire server-state queries using TanStack Query.

Frequently Asked Questions about react-state-management

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

FAQPage Schema

How do I manage both client and server state in React applications?▼

Separate client and server state using Context API for local UI state (themes, preferences) and TanStack Query for server state (data caching, invalidation, revalidation). This division creates a maintainable architecture where each layer handles its specific concerns efficiently.

What's the best way to handle optimistic UI updates in React?▼

Optimistic UI updates in TanStack Query allow you to update the UI immediately while mutations execute server-side, then revert if the mutation fails. This pattern improves perceived performance and user experience without waiting for server confirmation.

When should I use Context API versus TanStack Query for state management?▼

Use Context API for ephemeral client state like theme, user preferences, and UI toggles. Use TanStack Query for server state—fetched data, caching, background revalidation, and synchronization with remote sources.

Can I normalize data with TanStack Query and Context together?▼

Yes. State normalization structures data efficiently across components by storing entities separately and maintaining relationships. Combined with TanStack Query's caching and Context's client state, this ensures a single source of truth and reduces duplication.

Do I need custom hooks to access state from Context and TanStack Query?▼

Custom hooks like useTheme and useQuery accessors encapsulate state access logic, making components cleaner and state consumption reusable. They abstract the underlying Context and TanStack Query details from component code.

What problem does separating client and server state solve?▼

Separation eliminates state-management bloat by letting each layer handle what it does best: Context handles ephemeral UI state without network concerns; TanStack Query handles data consistency, caching, and server synchronization without UI clutter.