TanStack Table 中非稳定数据引用导致的无限渲染问题分析

问题背景

在使用 TanStack Table（原 React Table）时，开发者经常会遇到一个典型问题：当表格的列定义（columns）或数据（data）没有使用稳定的引用时，会导致组件无限重新渲染。这个问题在结合 React Query 等数据获取库使用时尤为常见。

问题重现

在示例中，开发者尝试通过 useQuery 获取数据并渲染表格，当查询键（queryKey）发生变化时，整个组件崩溃。核心问题不在于查询键的变化，而在于表格列定义的引用方式。

根本原因

问题的根源在于列定义（columns）被直接定义在组件函数体内，导致每次渲染都会创建新的列定义对象。由于 TanStack Table 内部使用这些引用来判断是否需要重新计算或渲染，不稳定的引用会触发：

1. 表格内部状态重置
2. 不必要的重新计算
3. 极端情况下导致无限渲染循环

解决方案

使用 useMemo 稳定列定义

最直接的解决方案是使用 React 的 useMemo 钩子来缓存列定义：

const columns = useMemo(() => [
  {
    accessorKey: 'name',
    header: 'Name'
  },
  {
    accessorKey: 'age',
    header: 'Age'
  }
], []);

将列定义移出组件

另一种更简单的方法是将列定义完全移出组件：

const columns = [
  {
    accessorKey: 'name',
    header: 'Name'
  },
  {
    accessorKey: 'age',
    header: 'Age'
  }
];

function MyTable() {
  // 组件逻辑
}

最佳实践

1. 始终稳定列定义：无论是通过 useMemo 还是外部定义，确保列引用稳定
2. 数据也需稳定：对于表格数据，同样需要确保引用稳定，特别是当数据来自API响应时
3. 避免内联函数：列定义中的渲染函数也应当保持稳定引用
4. 性能考量：对于复杂表格，稳定的引用可以显著提升性能

总结

TanStack Table 作为高性能的表格解决方案，对数据引用的稳定性有严格要求。理解并正确处理列定义和数据的引用稳定性，是避免渲染问题和性能优化的关键。通过遵循这些最佳实践，开发者可以构建出既稳定又高效的表格组件。