useMemo未生效求助：React Query中数据处理重复执行

你的代码核心问题 #

1. useMemo依赖数组不完整：massageCategoriesData逻辑依赖data，但你未将data加入useMemo的依赖数组。即便React Query缓存了data，组件重新挂载时，实例内的data变量会重新关联缓存值，依赖缺失会导致useMemo行为不可控，甚至强制触发重复计算。
2. useMemo的缓存范围限制：useMemo的缓存是组件实例绑定的，组件卸载后对应实例的useMemo缓存会被销毁。当组件重新挂载时，新实例的useMemo会重新执行计算，这是正常行为，并非useMemo失效。

useMemo的其他影响因素 #

• 组件实例生命周期：每个组件实例的useMemo缓存相互独立，组件卸载后缓存清空，重新挂载必然触发重新计算。
• React内存回收机制：正如官方文档所述，React会在后台组件需要释放内存时，主动丢弃useMemo的缓存，即便依赖未变化也会重新计算。
• 依赖项引用变化：如果依赖项是对象/数组，即便内容未变但引用更新（比如每次渲染创建新对象），useMemo会触发重新计算。

正确的React Query数据处理方式 #

React Query内置select选项，专门用于转换缓存数据，该转换在缓存层完成，所有使用该查询的组件共享转换结果，不会重复计算，完美匹配你想要的全局数据复用效果：

function massageCategoriesData(data){
// ...some computation here...
}

const useDataCategories = () => {
  const query = useQuery(
    ['categories'],
    () => api.fetchCategories(),
    { 
      staleTime: Infinity, 
      cacheTime: Infinity,
      // 使用select转换数据
      select: (data) => massageCategoriesData(data)
    },
  );

  return query;
};

这样不管组件如何挂载卸载，只要React Query缓存存在，massageCategoriesData仅会在首次请求成功后执行一次，所有组件共享转换后的结果。

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