通过React Hooks寻求最佳实践

Question

我在学习React Hooks方面取得了进步，但在某些方面仍不清楚。

我现在已经成功地将“硬编码”异步get调用从我的Context对象之一重构为名为requests.js的实用程序文件。我在其中调用的函数称为useFetch。

因此，回到Context对象中，我调用useFetch以获取可能的用户角色。然后，我将这些角色填充到上下文的roles属性中，以便任何需要它们的React组件都可以使用它们。

所有这些都工作正常，除了因为要重复加载Context对象，而重复填充roles属性也是如此。有趣的是，useFetch并未多次呼叫端点。

为防止不必要地重新填充Context对象的roles属性，我这样做：

  const { loading, data } = useFetch(`${API_ROOT()}user_management/roles`, app.awsConfig);

  if (!loading && customer.roles.length === 0) {
    const allRoles = data.roles;
    // Populate roles property here ...
  }

最初，我将此代码包装在useEffect构造中，但被告知useFetch不能在其中，我想是因为它已经具有useEffect构造和嵌套他们是不允许的。这是确切的消息：

React Hook "useFetch" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

^^^这对我来说毫无意义，因为我非常有意识地使用use...命名约定创建了一个React Hook函数。似乎没什么区别。

无论如何，只是想知道我上面的解决方案是一种常见的，可接受的方法还是有更好的方法？