react-best-practices
React Best Practices (TanStack Start Edition)
Comprehensive performance optimization guide for React and TanStack Start applications. Contains 45+ rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. Customized for TanStack Start with server functions, Router SSR Query integration, and project-specific patterns.
When to Apply
Reference these guidelines when:
- Writing new React components or TanStack Start routes
- Implementing data fetching (server functions, Router SSR Query, TanStack Query)
- Reviewing code for performance issues (waterfalls, bundle size, re-renders)
- Refactoring existing React/TanStack code
- Optimizing bundle size, load times, or SSR performance
- Working with route loaders (
createFileRoute,loader) - Creating server functions (
createServerFn)
Project-Specific Context
More from huynhsang2005/blog-tanstack
framer-motion
Create smooth, performant animations with framer-motion. Use when building page transitions, component animations, or gesture-based interactions.
18tanstack-form
Use TanStack Form for complex forms with Zod validation. Use when building non-trivial forms or admin editors.
10frontend-ui-ux
Designer-turned-developer workflow for crafting cohesive UI/UX with strong visual polish and interaction quality.
9tanstack-table
Use TanStack Table for complex admin grids and data tables. Use when you need sorting/filtering/pagination/column defs beyond a simple list.
8tanstack-start
Build features in TanStack Start (server/client boundaries, server functions, SSR-friendly data loading). Use when creating routes, server functions, or anything involving SSR/hydration/caching.
7tanstack-router
Work effectively with TanStack Router file-based routing in this repo. Use when adding/changing routes, loaders, route params/search params, or navigation.
6