React Table疑问：useState是否已memo化？非memo化数据有何问题？

1. useState本身是否实现了memo化？ #

答案是部分符合memo化核心要求——useState返回的state值，其引用在组件多次渲染中是稳定的，除非你调用对应的setter函数主动更新它。

举个例子：

const [data, setData] = useState([{ id: 1, name: "张三" }]);

只要不调用setData，每次组件渲染时data的引用都是同一个数组；只有当你通过setData传入新数组（或函数式更新返回新数组）时，data的引用才会改变。

这也是React Table官网示例敢直接用useState存表格数据的原因：它天然保证了数据引用的稳定性，满足useTable对数据memo化的核心要求。

2. 未memo化数据会引发哪些问题？ #

React Table的useTable钩子依赖数据的引用一致性来判断是否需要重新计算表格核心实例（比如行数据、列配置、分页状态等）。如果数据引用每次渲染都变化（比如直接在组件内定义const data = [{...}]，每次渲染都新建数组），会导致：

• 性能损耗：useTable会频繁重建表格实例，重新计算所有行、列的状态，大数据量下卡顿明显。
• 不必要的重渲染：表格组件及其子组件（自定义单元格、过滤器等）会无意义地重复渲染，出现界面闪烁、响应延迟。
• 状态异常：表格的临时状态（比如排序、筛选）可能会被意外重置，因为表格实例被重新创建了。

3. 需要修改数据时的正确做法？ #

根据数据的来源不同，分两种场景处理：

场景1：数据由组件自身管理（用useState） #

直接通过useState的setter函数进行不可变更新，保证只有数据真的变化时才更新引用：

// 正确：函数式更新，基于旧数据生成新数据
const handleEdit = (rowId, newName) => {
  setData(prevData => 
    prevData.map(row => 
      row.id === rowId ? {...row, name: newName} : row
    )
  );
};

这种方式既保证了数据更新的正确性，又维持了引用的稳定性——只有当数据实际变化时，data的引用才会改变，useTable只会在必要时重新计算。

场景2：数据来自props或动态计算 #

如果数据是从父组件传入的props，或者是通过多个state/变量计算得到的，必须用useMemo缓存数据的引用：

// 示例：从props获取原始数据，经过过滤后传给表格
const memoizedData = useMemo(() => {
  return props.rawData.filter(item => item.status === "active");
}, [props.rawData]); // 依赖项：只有rawData变化时才重新计算

const tableInstance = useTable({ columns, data: memoizedData });

这样能确保memoizedData的引用只有在依赖项变化时才更新，避免useTable不必要的重计算。

避坑提醒 #

绝对不要在组件渲染时直接创建新的数据对象/数组，比如：

// 错误：每次渲染都会新建数组，引用永远变化
const tableInstance = useTable({
  columns,
  data: [{ id: 1, name: "张三" }]
});

这种情况哪怕数据内容没变，useTable也会每次都重建实例，严重影响性能。

内容的提问来源于stack exchange，提问作者jessieloo