TanStack Best Practices for React

Comprehensive patterns for TanStack Query, TanStack Router, and their integration. Each section is organized by priority so you can focus on what matters most first.

TanStack Query

Query Keys (CRITICAL)

Always use arrays, include all dependencies.

// Bad: string key, missing dependency
useQuery({ queryKey: 'todos', queryFn: fetchTodos })
useQuery({ queryKey: ['todos'], queryFn: () => fetchTodo(id) }) // id missing!