React Query Best Practices

What it does

This skill provides a comprehensive guide to React Query v4 (TanStack Query) based on TkDodo's blog series. It offers 24 prioritized rules across seven categories, covering topics like query keys, mutations, caching strategies, WebSocket integration, and TypeScript usage. The goal is to help developers build efficient and maintainable frontend UIs using React Query best practices.

When to use it

• When implementing new queries or mutations in a React application.
• When integrating WebSockets with React Query for real-time data updates.
• To establish effective query invalidation patterns after data modifications.
• For debugging unexpected behavior within your React Query implementation.
• When optimizing the render performance of components using React Query.

Key capabilities

• Prioritized Rules: Provides 24 rules categorized by impact (Critical, High, Medium).
• Query Key Management: Guidance on creating consistent and effective query keys (query-keys-as-dependencies, query-key-factory).
• Mutation Handling: Best practices for mutations and updates including invalidation and optimistic updates (mutation-invalidation, mutation-optimistic-updates).
• Caching Strategies: Advice on managing the React Query cache effectively (cache-).
• WebSocket Integration: Patterns for integrating WebSockets with React Query.
• TypeScript Support: Guidance on using React Query with TypeScript.

Example prompts

• "What are some best practices for creating query keys in React Query?"
• "How should I handle mutations and ensure queries are invalidated afterwards?"
• "Can you explain the difference between placeholder and initial data in a React Query query?"
• "I'm integrating WebSockets with React Query, what patterns should I follow?"

Tips & gotchas

• React Query Version: This skill is specifically tailored for React Query v4. Patterns may differ in version 5.
• Prioritization: Focus on the "Critical" and "High" priority rules first to maximize impact.
• Rule Prefixes: Rules are categorized using prefixes like query-, mutation-, cache- for easy identification (e.g., query-keys-as-dependencies).