如何检测React Query是否返回新数据集？useEffect监听data不触发原因求解

核心原因1：默认开启的结构共享机制 #

React Query 默认开启structuralSharing（结构共享）特性：当新请求返回数据后，会深度对比新旧数据的每一层结构，未发生变化的节点直接复用旧数据的内存引用，仅变更的节点会生成新引用。

你代码中useEffect的依赖是fetchedAuditData，也就是请求返回的data.items字段：

• 如果两次请求返回的items内容完全一致，结构共享逻辑会直接复用旧的items引用，useEffect只对比依赖的引用变化，因此不会触发回调。
• 组件渲染时每次都能拿到最新的状态快照，所以useEffect外部直接打印可以看到最新值，这和useEffect是否触发没有关联。

核心原因2：缓存时间对引用的影响 #

cacheTime控制查询实例卸载后缓存数据的保留时长：

• 默认cacheTime为5分钟，旧缓存会被保留，结构共享逻辑会正常执行，很容易出现未变更字段引用不变的情况。
• 当你设置cacheTime: 0时，旧的查询缓存会被立即销毁，新请求返回的所有数据都会生成全新的对象引用，items的引用必然发生变化，因此useEffect可以正常触发。

不推荐用useEffect监听数据来感知请求完成，直接使用React Query原生提供的onSuccess回调更稳定，不会出现引用对比的问题：

const {data: fetchedAuditData, metaData, isFetching} = useFilteredAudits({
  onSuccess: (newData) => {
    console.log("New Data")
    // 新数据拉取完成的逻辑写在这里
  }
});

如果确实需要监听items的内容变化，可以使用深比较方式的依赖校验：

// 仅适用于数据量不大的场景
useEffect(() => {
  console.log("New Data")
}, [JSON.stringify(fetchedAuditData)])

内容的提问来源于stack exchange，提问作者Pubudu Jayasanka