React-query：isFetching等状态疑问及组件重复渲染咨询

一、重复渲染和重复请求的原因 #

• 重复请求的核心原因：
  父组件Fa在请求过程中（isFetching为true时）返回<Spin/>，此时子组件Ch并未挂载。当Fa的请求完成、isFetching变为false后，Ch才首次挂载，触发自身useQuery发起新请求。加上isFetching会在**任何请求阶段（包括初始加载、后台自动刷新）**切换状态，导致Fa反复切换渲染<Spin/>和子组件，引发Ch的挂载/卸载循环，进一步触发更多请求。
• 多次重渲染的原因：
  isFetching的状态变更会直接触发Fa重渲染，每次渲染切换返回的元素类型（加载组件/子组件），会导致Ch反复挂载、卸载，进而引发Ch的重渲染和useQuery的重复执行。

二、数据加载完成后渲染子组件的方案 #

既然isLoading（仅初始加载触发）、isFetching（所有请求阶段触发）、isPending（包含加载和重新获取）都不符合需求，你可以通过以下两种方式实现：

方案1：直接判断data是否存在 #

通过data是否有值来确定是否渲染子组件，只有当请求成功拿到数据后，才让子组件挂载：

function Fa({children}) {
    const {data, isFetching} = useQuery({queryKey: ['key'], queryFn: () => getFetcher('/myapi')});
    // 数据未就绪时显示加载组件
    if(!data) return <Spin/>;
    // 后台刷新时仅显示加载提示，不卸载子组件
    return (
        <>
            {isFetching && <div className="loading-overlay">后台刷新中...</div>}
            {children}
        </>
    )
}

方案2：使用isSuccess状态 #

useQuery返回的isSuccess状态表示请求已成功完成且有可用数据，用它来控制子组件渲染：

function Fa({children}) {
    const {isSuccess, isFetching} = useQuery({queryKey: ['key'], queryFn: () => getFetcher('/myapi')});
    if(!isSuccess) return <Spin/>;
    return (
        <>
            {isFetching && <div className="loading-overlay">后台刷新中...</div>}
            {children}
        </>
    )
}

两种方案的优势：

• 仅在数据完全就绪后渲染子组件，避免子组件在数据未准备好时挂载。
• 后续后台刷新时，只显示加载提示而不卸载子组件，彻底避免重复请求和不必要的重渲染。
• 确保Fa和Ch的useQuery使用完全相同的queryKey和queryFn，React Query会自动复用缓存，Ch挂载时直接读取缓存数据，不会发起新请求。

内容的提问来源于stack exchange，提问作者zhen han su