react-tanstack-senior

React + TanStack 高级开发者技能

核心理念

KISS > Clever Code
Readability > Brevity  
Explicit > Implicit
Composition > Inheritance
Colocation > Separation
Type Safety > Any

快速决策树

状态管理：

• 服务端状态 → TanStack Query（必须使用）
• URL 状态 → TanStack Router 搜索参数
• 表单状态 → TanStack Form 或 React Hook Form
• 全局 UI 状态 → Zustand（而非 Redux）
• 本地 UI 状态 → useState/useReducer

路由：

• SPA → TanStack Router
• 全栈 SSR → TanStack Start
• 现有 Next.js 项目 → 继续使用 Next.js

项目设置工作流

1. 确定项目类型：

   • SPA/仅客户端？ → Vite + TanStack Router + Query
   • 全栈 SSR？ → TanStack Start（基于 Vinxi）
   • 现有项目？ → 增量采用

2. 初始化项目 → 参见 folder-structure.md

3. 设置核心依赖项 → 参见 recommended-libraries.md

TanStack 生态系统参考

库	阅读时机
tanstack-query.md	数据获取、缓存、变更
tanstack-router.md	类型安全路由、加载器、搜索参数
tanstack-table.md	复杂表格、排序、筛选、分页
tanstack-form.md	表单验证、字段数组、异步验证
tanstack-start.md	全栈 SSR 框架

代码质量标准

命名约定

// Components: PascalCase dengan suffix deskriptif
UserProfileCard.tsx      // ✓
UserCard.tsx             // ✗ terlalu generic
user-profile.tsx         // ✗ wrong case

// Hooks: camelCase dengan prefix 'use'
useUserProfile()         // ✓
useGetUserProfile()      // ✗ redundant 'Get'
getUserProfile()         // ✗ missing 'use'

// Query keys: array dengan hierarchy
['users', 'list', { status }]           // ✓
['usersList']                            // ✗ tidak granular
`users-${status}`                        // ✗ string interpolation

// Files: kebab-case untuk non-components
api-client.ts            // ✓
apiClient.ts             // ✗ 

组件结构模式

// 1. Imports (grouped: external → internal → types)
import { useSuspenseQuery } from '@tanstack/react-query'
import { userQueries } from '@/features/users/api'
import type { User } from '@/features/users/types'

// 2. Types (colocated, tidak di file terpisah kecuali shared)
interface UserCardProps {
  userId: string
  onSelect?: (user: User) => void
}

// 3. Component (single responsibility)
export function UserCard({ userId, onSelect }: UserCardProps) {
  // 3a. Queries/mutations first
  const { data: user } = useSuspenseQuery(userQueries.detail(userId))
  
  // 3b. Derived state (useMemo hanya jika expensive)
  const fullName = `${user.firstName} ${user.lastName}`
  
  // 3c. Handlers (useCallback hanya jika passed to memoized children)
  const handleClick = () => onSelect?.(user)
  
  // 3d. Early returns untuk edge cases
  if (!user.isActive) return null
  
  // 3e. JSX (clean, minimal nesting)
  return (
    <article onClick={handleClick} className="user-card">
      <h3>{fullName}</h3>
      <p>{user.email}</p>
    </article>
  )
}

应避免的反模式

// ❌ NEVER: useEffect untuk data fetching
useEffect(() => {
  fetch('/api/users').then(setUsers)
}, [])

// ✅ ALWAYS: TanStack Query
const { data: users } = useQuery(userQueries.list())

// ❌ NEVER: Prop drilling lebih dari 2 level
<Parent userData={user}>
  <Child userData={user}>
    <GrandChild userData={user} />

// ✅ ALWAYS: Context atau query di level yang butuh
function GrandChild() {
  const { data: user } = useQuery(userQueries.current())
}

// ❌ NEVER: Premature optimization
const value = useMemo(() => a + b, [a, b]) // simple math

// ✅ ALWAYS: Optimize only when measured
const value = a + b // just calculate

// ❌ NEVER: Index as key untuk dynamic lists
{items.map((item, i) => <Item key={i} />)}

// ✅ ALWAYS: Stable unique identifier
{items.map(item => <Item key={item.id} />)}

调试指南

参见 debugging-guide.md，了解：

• React DevTools 性能分析
• TanStack Query DevTools
• 内存泄漏检测
• 性能瓶颈识别
• 常见错误模式

常见陷阱与错误

参见 common-pitfalls.md，了解：

• 过期闭包错误
• 竞态条件
• 内存泄漏模式
• 水合不匹配
• 查询失效处理错误

性能检查清单

□ Bundle size < 200KB gzipped (initial)
□ Largest Contentful Paint < 2.5s
□ No unnecessary re-renders (React DevTools)
□ Images lazy loaded
□ Code splitting per route
□ Query deduplication working
□ No memory leaks (heap snapshot stable)

代码审查检查清单

□ No `any` types (use `unknown` if needed)
□ No `// @ts-ignore` tanpa penjelasan
□ Error boundaries di route level
□ Loading states handled
□ Empty states handled
□ Error states handled  
□ Accessibility (aria labels, keyboard nav)
□ No hardcoded strings (i18n ready)
□ No console.log in production code
□ Tests untuk business logic