为什么切回应用标签页时useQuery会触发React组件重新渲染？

你遇到的现象是React Query的默认特性，不属于代码疏漏：
React Query默认开启了refetchOnWindowFocus配置项，当页面重新获得焦点（切换标签页切回、从开发者工具等其他窗口切回页面）时，会自动触发查询重新拉取最新数据，查询状态更新后自然会触发绑定了该查询的组件重渲染，所以会重复打印data日志。

你可以根据需求选择不同的关闭/调整方案：

• 全局关闭窗口聚焦重查特性：创建QueryClient时修改默认配置即可，所有查询都会继承该配置

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
});

// 后续将queryClient传入QueryClientProvider挂载到应用根节点即可

• 仅关闭单个查询的窗口聚焦重查特性：在对应useQuery的配置参数中添加属性即可，不影响其他查询

const { data } = useQuery("pokemon", () =>
    axios("https://pokeapi.co/api/v2/pokemon/"),
    { refetchOnWindowFocus: false }
);
console.log(data);

• 保留特性同时减少不必要重查：可以搭配staleTime配置项设置数据的新鲜时间，在新鲜时间内即使页面获得焦点也不会触发重查，适合需要半实时数据的场景

// 示例：全局设置数据5分钟内为新鲜状态，不会触发窗口聚焦重查
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: true,
      staleTime: 5 * 60 * 1000, // 单位为毫秒
    },
  },
});

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