缓存数据是自定义挂钩 - 防止重新渲染答案

【问题标题】：Cache data is custom hook - prevent rerender缓存数据是自定义挂钩 - 防止重新渲染
【发布时间】：2021-11-02 03:23:57
【问题描述】：

我有一个自定义钩子，它从我的 graphql 服务器获取一些基本的用户配置文件数据。它被许多组件调用以访问该数据。现在它似乎正在导致重新渲染，因为每次调用它都会再次获取该数据。我应该如何最好地在这个钩子中缓存这些数据？ useCustomQuery 是从我的 gql 客户端导入的。

export const useUserData = () => {

  const { data, isLoading, error } = useCustomQuery({
    query: async (query) => {
      return getFields(query.me, 'account_id', 'role', 'email', 'profile_image');
    },
  });
  return { isLoading, error, me: data };
};

【问题讨论】：

标签： reactjs caching react-hooks memoization react-memo

【解决方案1】：

我会查看您在哪里调用自定义挂钩（可能是在 useEffect 中？），并尝试合并 useMemo 来记忆返回的数据，直到您需要再次实际调用该自定义挂钩。

但是，如果没有更多代码，诊断起来有点困难。

【讨论】：