Loading...
Loading...
Compare original and translation side by side
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.
核心原则： 避免‘锤子综合征’（即手握锤子的人看什么都像钉子）。先使用原生技术实现，再在能明确带来收益的场景下策略性地采用TanStack。时机： 仅在你的应用通过原生Next.js/React/Tailwind实现并正常运行后再使用此方案。
| 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 |
| 库 | 用途 |
|---|---|
| TanStack Query | 服务端状态管理、缓存、数据同步 |
| TanStack Table | 无头（Headless）表格/网格逻辑 |
| TanStack Form | 表单状态管理与验证 |
| TanStack Router | 类型安全路由 |
| TanStack Virtual | 大型列表虚拟化 |
| TanStack Ranger | 范围/滑块组件 |
Ok, I want you to look through the ENTIRE project and look for areas where, if we leveraged one of the many TanStack libraries (e.g., query, table, forms, etc), we could make part of the code much better, simpler, more performant, more maintainable, elegant, shorter, more reliable, etc. Use ultrathinkOk, I want you to look through the ENTIRE project and look for areas where, if we leveraged one of the many TanStack libraries (e.g., query, table, forms, etc), we could make part of the code much better, simpler, more performant, more maintainable, elegant, shorter, more reliable, etc. Use ultrathinkfetchfetch| Model | Configuration |
|---|---|
| Claude Code + Opus 4.5 | Use ultrathink |
| Codex + GPT 5.2 | High or Extra-High reasoning effort |
| 模型 | 配置 |
|---|---|
| Claude Code + Opus 4.5 | 使用ultrathink模式 |
| Codex + GPT 5.2 | 高或超高推理能力配置 |
// Vanilla approach
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, []);// Vanilla approach
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, []);// TanStack Query approach
const { data, isLoading, error } = useQuery({
queryKey: ['users'],
queryFn: () => fetch('/api/users').then(res => res.json()),
});// TanStack Query approach
const { data, isLoading, error } = useQuery({
queryKey: ['users'],
queryFn: () => fetch('/api/users').then(res => res.json()),
});// Vanilla approach with manual sorting, filtering, pagination
// ... 200+ lines of state management// Vanilla approach with manual sorting, filtering, pagination
// ... 200+ lines of state management// TanStack Table handles sorting, filtering, pagination
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
});// TanStack Table handles sorting, filtering, pagination
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
});bd create "Evaluate TanStack Query opportunities" -t enhancement -p 3
bd create "Migrate user data fetching to TanStack Query" -t enhancement -p 2
bd create "Implement data table with TanStack Table" -t feature -p 2
bd create "Add TanStack Virtual to chat message list" -t performance -p 2bd create "Evaluate TanStack Query opportunities" -t enhancement -p 3
bd create "Migrate user data fetching to TanStack Query" -t enhancement -p 2
bd create "Implement data table with TanStack Table" -t feature -p 2
bd create "Add TanStack Virtual to chat message list" -t performance -p 2Ok, I want you to look through the ENTIRE project and look for areas where, if we leveraged one of the many TanStack libraries (e.g., query, table, forms, etc), we could make part of the code much better, simpler, more performant, more maintainable, elegant, shorter, more reliable, etc. Use ultrathinkOk, I want you to look through the ENTIRE project and look for areas where, if we leveraged one of the many TanStack libraries (e.g., query, table, forms, etc), we could make part of the code much better, simpler, more performant, more maintainable, elegant, shorter, more reliable, etc. Use ultrathinkLook through the project for data fetching patterns that would benefit from TanStack Query. Consider caching needs, refetching patterns, and optimistic updates. Identify the top 3 opportunities. Use ultrathink.Look through the project for data fetching patterns that would benefit from TanStack Query. Consider caching needs, refetching patterns, and optimistic updates. Identify the top 3 opportunities. Use ultrathink.Look through the project for table/grid components that would benefit from TanStack Table. Consider sorting, filtering, pagination, and column management needs. Identify candidates. Use ultrathink.Look through the project for table/grid components that would benefit from TanStack Table. Consider sorting, filtering, pagination, and column management needs. Identify candidates. Use ultrathink.