为何多次调用自定义hook useBooksData仅触发一次API请求？

我创建了一个名为useBooksData的自定义Hook，内部包含诸多常量、函数以及一个置于useEffect中的API调用：

useEffect(() => {
  if (books === null) {
    getBooks();
  }
}, []);

随后我在同一页面的多个组件中多次使用该Hook，例如：

• 组件A中：

  const { data } = useBooksData();
  

• 组件B中：

  const { loading } = useBooksData();
  

• 组件C中：

  const { numberOfBooks } = useBooksData();
  

我原本预期每调用一次该Hook就会触发一次getBooks API调用，但浏览器网络面板显示仅触发了一次，请问这是为什么？

这种情况说明你的useBooksData Hook内部实现了状态共享/全局缓存逻辑，常见的两种场景：

• 你把books、loading这类状态存在了Hook外部的模块级变量里，而不是Hook内部的useState或useReducer中。模块级变量在整个应用生命周期里只会初始化一次，所有Hook调用都会共享这个变量的值。第一次调用Hook时，books是null，触发API请求；请求完成后books被赋值，后续再调用Hook时，if (books === null)的条件不满足，自然不会重复发起请求。
• 另一种可能是你通过useContext配合全局状态管理（比如自定义上下文、Redux、Zustand等）维护状态，Hook内部的状态是从全局上下文中读取的，所有Hook实例共享同一套全局状态。第一次请求完成后全局状态更新，后续调用Hook时读取到的books已不是null，因此不会重复触发API。

本质就是：你的Hook并非每次调用都创建独立的状态实例，而是所有调用共享同一份状态，所以API仅会触发一次。

内容的提问来源于stack exchange，提问作者marcus-linmarkson