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

Question

我有一个自定义钩子，它从我的 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 };
};

Answer 1

我会看看你在哪里调用你的自定义钩子（也许是在 useEffect 中？），并尝试合并 useMemo 来记忆返回的数据，直到你需要再次真正调用该自定义钩子。

但是，如果没有进一步的代码，诊断起来有点困难。