useMemo 被调用，依赖性没有任何变化

Question

我正在使用 React 17 并尝试移动一些 redux 数据来响应查询。

redux 中的常见功能之一是处理 api 数据并为所有消费者存储它。

我正在尝试通过反应查询复制相同的功能。如果第一次 api 调用成功 - 我想处理 api 返回的数据并将其保存在 useMemo

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

const useDataCategories = () => {
  const query = useQuery(
    ['categories'],
    () => api.fetchCategories(),
    { staleTime: Infinity, cacheTime: Infinity },
  );

  const { data, isSuccess } = query;

  const finalData = useMemo(() => {
    if (isSuccess) {
      return massageCategoriesData(data);
    }
    return null;
  }, [query.isSuccess]);

  return {
    query,
    data: finalData,
  };
};

但问题是，当我从不断卸载和安装的组件中调用 useDataCategories 时 - 每次都会发生按摩，而 useMemo 不起作用..

我尝试阅读官方文档，他们是这样说的：

您可以依赖 useMemo 作为性能优化，而不是作为语义保证。将来，React 可能会选择“忘记”一些先前存储的值并在下一次渲染时重新计算它们，例如为屏外组件释放内存。编写您的代码，使其在没有 useMemo 的情况下仍然可以工作 - 然后添加它以优化性能。

请帮忙！ useMemo 的行为也依赖于其他事物吗？

Answer 1

您可能希望在 queryFn 本身内部执行此操作：

const useDataCategories = () => {
  const query = useQuery(
    ['categories'],
    async () => {
      const data = await api.fetchCategories()
      return massageCategoriesData(data)
    }
    { staleTime: Infinity, cacheTime: Infinity },
  );

我在这里详细介绍了不同的方法及其权衡：https://tkdodo.eu/blog/react-query-data-transformations