使用React Query请求服务器时React分页组件卡顿问题求助

点击分页切换时，激活态样式切换卡顿，快速切换时更明显，移除TransactionsLayout后卡顿消失，且改用普通Axios请求无此问题，说明卡顿源于useQuery状态变化触发的TransactionsLayout频繁/过重渲染。以下是可行修复方案：

1. 开启keepPreviousData减少状态波动 #

切换分页时，useQuery默认会先把isLoading设为true并清空旧数据，导致TransactionsLayout频繁切换加载态与数据态，引发卡顿。开启keepPreviousData后，新数据加载完成前会保留上一页数据，避免不必要的状态跳变：

const { data, isLoading, isError, error } = useQuery(
  ['transactions', {...filters, page}],
  () => TransactionService.getAll({...filters, page}),
  {
    cacheTime: 60 * 60 * 1000,
    staleTime: 60 * 60 * 1000,
    keepPreviousData: true, // 新增此配置
  }
);

2. 缓存TransactionsLayout的props避免不必要重渲染 #

useQuery的isLoading、data等状态每次切换分页都会更新，如果TransactionsLayout未做memo优化，会触发无意义的重渲染。用useMemo缓存props，或给组件套React.memo：

方式一：缓存props #

const transactionLayoutProps = useMemo(() => ({
  data,
  isLoading,
  isError,
  error
}), [data, isLoading, isError, error]);

// 渲染时使用缓存后的props
<TransactionsLayout {...transactionLayoutProps} />

方式二：给TransactionsLayout添加memo #

// 在TransactionsLayout组件定义处
const TransactionsLayout = React.memo(({ data, isLoading, isError, error }) => {
  // 原组件内容
});

3. 用useMemo替代useEffect计算总页数 #

原代码用useEffect更新cachedTotalPage，会多触发一次state更新导致额外渲染，直接用useMemo计算更高效：

// 移除原有的useState和useEffect，替换为useMemo
const cachedTotalPage = useMemo(() => {
  if (!data) return 0;
  return Math.floor(data.count / limit);
}, [data, limit]);

4. 优化查询键的稳定性 #

当前查询键使用{...filters, page}会每次创建新对象，虽然useQuery会深比较，但改成原子值组合可减少不必要的计算：

// 假设filters包含limit、status等字段，直接拆解为原子值
const queryKey = ['transactions', filters.limit, filters.status, page];

const { data, isLoading, isError, error } = useQuery(
  queryKey,
  () => TransactionService.getAll({...filters, page}),
  // 配置不变
);

5. 检查TransactionsLayout内部渲染逻辑 #

如果上述方案仍有卡顿，排查组件内部：

• 若列表数据量大，改用虚拟滚动减少DOM节点数量
• 列表项组件未用React.memo，导致每条数据变化时全量重渲染
• 加载状态时渲染了复杂动画或大量元素，简化加载UI

内容的提问来源于stack exchange，提问作者Данияр Булдаков