tanstack-patterns

What problem does it solve?

This Skill provides best practices for building modern, data-driven React frontends using TanStack Router and Query. It simplifies complex routing, efficient data fetching, and robust state management, leading to more performant and maintainable user interfaces.

Core Features & Use Cases

• File-Based Routing: Guides on structuring routes based on file system hierarchy, making routing intuitive, discoverable, and easy to manage.
• Route Loaders: Patterns for fetching data directly within routes, ensuring data is available before component render and simplifying data flow.
• Optimistic Updates: Techniques for improving UI responsiveness by optimistically updating the cache during mutations, providing instant feedback to users.
• Validated Search Params: Integrates Zod for type-safe validation of URL search parameters, preventing invalid inputs and improving data integrity.
• Use Case: A developer is building a user profile page that fetches user data and allows updates. They can use this skill to define a file-based route with a loader for fetching the user, and implement an optimistic update pattern for the user update mutation, providing a smooth user experience.

Quick Start

Create a new file-based route for '/products/$productId' in 'src/routes/products/$productId.tsx' that fetches product details using a loader.