skills.rest
bluebricks-nl
bluebricks-nlOFFICIAL
Explore all skills by this author →
GitHub

tanstack-query-best-practices

Enforce TanStack Query best practices for data fetching and caching in React applications.

Updated Feb 4, 2026
Search Tags:#performance#caching#state management#data fetching#tanstack query#react query
One-click install
npx skills add https://github.com/bluebricks-nl/blue-bricks-template --skill tanstack-query-best-practices-bluebricks-nl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query-best-practices
Source: https://github.com/bluebricks-nl/blue-bricks-template/tree/main/.claude/skills/tanstack-query-best-practices
Command: npx skills add https://github.com/bluebricks-nl/blue-bricks-template --skill tanstack-query-best-practices-bluebricks-nl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for using TanStack Query (React Query) to optimize data fetching, caching, mutations, and server state management in React applications, preventing common bugs and improving performance.

Core Features & Use Cases

  • Optimized Data Fetching: Implement efficient data fetching strategies with proper query key management and caching.
  • Robust State Synchronization: Ensure data consistency through effective mutation handling and invalidation patterns.
  • Performance Enhancements: Leverage features like select and placeholderData to reduce re-renders and improve perceived performance.
  • Use Case: When building a dashboard that displays real-time user data, notifications, and system statistics, applying these best practices ensures data is fetched efficiently, updates smoothly, and provides a responsive user experience without unnecessary network requests or stale information.

Quick Start

Apply TanStack Query best practices to the data fetching logic in the current React component.

Frequently Asked Questions about tanstack-query-best-practices

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

FAQPage Schema
How do I structure TanStack Query keys for effective data caching in React?▼

TanStack Query caching relies on structured query keys to manage server state. Hierarchical query keys ensure accurate data fetching, precise cache invalidation, and prevent stale information across your React components.

What is the best way to handle mutations and state synchronization with React Query?▼

Handling mutations in React Query requires robust invalidation patterns. Effective mutation handling synchronizes server state by invalidating specific query keys, ensuring data consistency after successful updates without manual refetching.

How can I optimize React performance using TanStack Query select and placeholderData?▼

Optimize React performance with TanStack Query by leveraging the `select` option to transform data and `placeholderData` to show immediate content. These features reduce unnecessary re-renders and improve perceived loading performance.

How do I implement infinite queries and prefetching for efficient data fetching?▼

Implement infinite queries for paginated data and prefetching to load data before navigation. TanStack Query best practices provide critical rules for these strategies, reducing network requests and ensuring a responsive user experience.

Does TanStack Query support SSR integration and offline support for React applications?▼

TanStack Query supports SSR integration and offline support for React applications. Applying these best practices ensures data is fetched efficiently on the server and synchronized smoothly, providing a responsive user experience even with connection issues.

Related Skills

Explore More Software Engineering Skills→
paulotkspaulotks

react-query-hook

Create and review React Query hooks for data fetching and mutations.

Community
Intermediate
HsienWHsienW
63

frontend-ui-engineering

Develop React and TypeScript UI components with responsive layouts and state management.

Community
Advanced
DrLuggelsDrLuggels
3

react-state-management

Guide React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Community
Intermediate
mgd34msumgd34msu
4

tanstack-query

Manage React server state with TanStack Query data fetching, caching, and mutations.

Community
Intermediate