如何在调用React Query前更新状态时避免不必要的重渲染？

你的核心矛盾是：用useState存date会触发额外组件重渲染，用useRef存date则无法触发React Query的查询。下面提供两种最佳实践方案，按需选择：

方案1：用Ref存date，用触发态控制QueryKey #

通过useRef存储date避免组件重渲染，再用一个专门的state作为queryKey的一部分，触发React Query重新查询。这种方式会自动处理初始查询，完全符合你"查询时立即渲染加载状态、完成后渲染数据"的需求。

import { useState, useRef } from 'react';
import { useQuery } from '@tanstack/react-query';

const YourComponent = () => {
  const dateRef = useRef("");
  // 用计数器作为查询触发器，每次更新都会让queryKey变化
  const [queryTrigger, setQueryTrigger] = useState(0);

  // 自定义更新date并触发查询的函数
  const updateDate = (newDate) => {
    dateRef.current = newDate;
    // 通过更新触发器触发查询
    setQueryTrigger(prev => prev + 1);
  };

  const { data, isLoading } = useQuery({
    queryKey: ["chat", queryTrigger],
    // 查询时取ref的最新值
    queryFn: () => getChat(dateRef.current),
  });

  // 渲染逻辑：只有isLoading或data变化时才会重渲染
  if (isLoading) return <div>加载中...</div>;
  return <div>{/* 渲染data */}</div>;
};

为什么这个方案有效？ #

• dateRef的更新不会触发组件重渲染，避免了不必要的渲染次数；
• queryTrigger的变化会让React Query感知到queryKey更新，自动触发新的查询；
• 查询过程中isLoading和data的变化会触发组件渲染，正好对应你需要的两次渲染时机：查询开始（加载状态）、查询完成（数据状态）。

方案2：手动调用refetch，关闭自动查询 #

如果需要更精确控制查询时机（比如初始不需要查询，仅在用户选择date后触发），可以关闭React Query的自动查询，用refetch手动触发，同时用useRef存储date。

import { useRef } from 'react';
import { useQuery } from '@tanstack/react-query';

const YourComponent = () => {
  const dateRef = useRef("");
  const { data, isLoading, refetch } = useQuery({
    queryKey: ["chat"],
    queryFn: () => getChat(dateRef.current),
    // 关闭自动查询，完全手动控制
    enabled: false,
  });

  // 自定义更新date并触发查询的函数
  const updateDate = (newDate) => {
    dateRef.current = newDate;
    refetch();
  };

  // 若需要初始查询，可在useEffect中调用一次refetch
  // useEffect(() => {
  //   refetch();
  // }, []);

  if (isLoading) return <div>加载中...</div>;
  return <div>{/* 渲染data */}</div>;
};

方案对比 #

• 方案1更贴合React Query的自动管理模式，无需手动调用查询函数，适合需要初始查询的场景；
• 方案2灵活性更高，适合需要严格控制查询时机的场景（比如依赖用户操作触发查询）。

为什么你之前的方案有问题？ #

• 使用useState时：date的更新会触发组件重渲染，虽然能触发查询，但多了一次无意义的渲染（仅date变化，查询状态还未更新）；
• 使用useRef时：date.current的变化不会触发组件重渲染，React Query无法感知到queryKey的变化，因此不会触发新的查询。

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