useSWR在未使用页面仍发起请求？问题咨询与原因排查

这一现象不正常，原因主要有以下两点：

1. 自定义Hook被全局/其他页面调用 #

你的useFetchAccount Hook如果被全局组件（比如App根组件、全局导航/布局组件）或者页面B/C/D中的组件引入并调用了，那么每次路由切换时，这些组件的渲染都会触发Hook内部的SWR请求逻辑，导致控制台输出“fetch call”。

检查项目中是否在非页面A的地方使用了这个Hook，比如：

• App.jsx/tsx这类根组件
• 所有页面都会共用的布局组件（如Layout.jsx）
• 页面B/C/D中的某个子组件

2. finally的写法错误导致日志提前打印 #

你的fetcher函数中，finally的写法存在问题：

// 错误写法：立即执行console.log，而非在fetch完成后执行
.finally(console.log("fetch call"))

finally方法需要接收一个回调函数作为参数，你当前的写法会让console.log("fetch call")在创建fetcher函数时就立即执行，而不是等到fetch请求完成后才打印。也就是说，只要useFetchAccount Hook被调用（组件渲染），就会打印这条日志，哪怕SWR因为缓存没有发起实际的网络请求。

修正后的写法：

.finally(() => console.log("fetch call"))

解决步骤 #

1. 确认useFetchAccount仅在页面A的组件中被调用，移除全局或其他页面中的引用
2. 修正finally的回调写法，确保日志只在fetch请求完成后打印
3. 可通过SWR的revalidateIfStale等配置，进一步控制缓存策略，避免不必要的请求

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