tanstack-integrationlisted

# TanStack Integration — Strategic Library Adoption > **Philosophy:** Avoid "man with a hammer syndrome" (to whom everything appears as a nail). Start vanilla, then strategically adopt TanStack where it provides clear benefits. > > **Timing:** Use this AFTER your app is already working pretty well in vanilla Next.js/React/Tailwind. --- ## What is TanStack? TanStack is a set of high-quality libraries for web applications: | Library | Purpose | |---------|---------| | **TanStack Query** | Server state management, caching, synchronization | | **TanStack Table** | Headless table/grid logic | | **TanStack Form** | Form state management and validation | | **TanStack Router** | Type-safe routing | | **TanStack Virtual** | Virtualization for large lists | | **TanStack Ranger** | Range/slider components | --- ## The Anti-Pattern: Premature Adoption **Don't do this:** 1. Start new project 2. Immediately install all TanStack libraries 3. Force everything through TanStack patterns 4. End up with over-engineered code **Why it's bad:** - Not every feature needs TanStack - Adds complexity where simple solutions work - Makes code harder to understand for no benefit - "Man with a hammer" sees every problem as a nail --- ## The Correct Pattern: Strategic Adoption **Do this instead:** 1. Build with vanilla Next.js 16, React 19, Tailwind 2. Get the app working well 3. Run the TanStack analysis prompt 4. Adopt TanStack only where it clearly improves things 5. Repeat several rounds --