RTK Query懒加载模式下，组件挂载触发查询是否合理？需用useEffect吗？

一、当前写法的可行性 #

你直接在组件渲染逻辑里判断isUninitialized并调用getCatalogProducts的做法不可行，会触发React渲染规则冲突，甚至导致无限重渲染：

• React明确要求渲染阶段不能执行副作用（比如发起请求、更新状态），而调用懒查询函数会触发RTK Query的缓存状态更新，属于副作用范畴
• 即使第一次调用后isUninitialized变为false，但如果后续组件因缓存更新、props变化重新渲染时，一旦出现isUninitialized再次为true的情况（比如缓存被清空），就会再次调用请求函数，陷入循环
• 当前写法完全无法处理object或category props变化的情况——props更新后不会重新发起请求

二、必须改用useEffect实现 #

用useEffect是唯一符合React规则的正确做法：

• useEffect专门用来处理组件挂载、更新时的副作用，能确保请求只在指定时机执行
• 通过依赖数组可以精准控制请求触发时机：不仅在组件挂载时发起请求，还能在object或category变化时自动重新请求

修正后的代码示例：

export const Catalog: React.FC<CatalogProps> = ({ object, category }) => {
  const [getCatalogProducts, result] = useLazyGetCatalogProductsQuery();
  const { data } = result;

  const request = `object_like=${object}&category=${category}`;

  useEffect(() => {
    // 组件挂载或props变化时发起请求
    getCatalogProducts(request);
  }, [getCatalogProducts, object, category]);

  if (!data) return null;

  return (
    // 你的JSX代码
  );
};

注：RTK Query生成的懒查询函数是稳定的（每次渲染引用不变），所以可以安全加入依赖数组，无需额外处理。

三、懒加载模式与普通查询的核心差异 #

两者的本质区别在于请求触发的时机控制：

• 普通useQuery：组件一挂载就自动发起请求，适合页面加载时必须获取数据的场景，无需手动调用触发函数
• 懒加载useLazyQuery：组件挂载后不会自动请求，必须手动调用返回的触发函数才能发起请求，适合需要用户操作（比如点击按钮）或特定条件满足时才获取数据的场景

除此之外，两者共享RTK Query的缓存机制，缓存策略（如过期时间、缓存key）都是在API切片定义时统一配置的，和使用哪种查询钩子无关；初始状态上，useLazyQuery初始为isUninitialized: true，而useQuery初始为isLoading: true（无缓存时）。

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