react-query的useQuery为何无需传入useCallback记忆化回调？

核心原理非常简单：不要把用户传入的回调函数作为内部副作用/记忆化逻辑的依赖项，通过ref持久化保存回调的最新版本，内部逻辑永远调用ref中存储的最新回调即可，完全不需要要求用户用useCallback包裹传入的函数。

具体实现步骤 #

• 第一步：创建一个ref专门存储用户传入的查询函数，每次组件渲染时，同步把最新传入的函数赋值给ref.current，保证ref里永远存着持有最新闭包的函数版本。这个赋值操作是渲染阶段的同步操作，不会触发额外重渲染。
• 第二步：内部所有触发请求、重试、手动刷新的逻辑，都从ref上取最新的函数调用，不要把原始传入的函数放进useEffect、useCallback、useMemo的依赖数组里。
• 第三步：自动触发请求的副作用只依赖查询key（queryKey）即可，key变化时才重新跑请求逻辑，和传入的回调引用变化完全无关。

最简实现示例 #

import { useState, useEffect, useRef, useCallback } from 'react';

function useSimpleQuery(queryKey, queryFn) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  // 存储最新查询函数的ref
  const latestQueryFn = useRef(queryFn);
  // 每次渲染同步更新ref，拿到持有最新props/state的回调
  latestQueryFn.current = queryFn;

  // 请求逻辑记忆化时，依赖只放queryKey，不放queryFn
  const runQuery = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      // 调用时取ref上的最新函数，不存在闭包陈旧问题
      const result = await latestQueryFn.current();
      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  }, [queryKey]);

  // queryKey变化时自动触发请求
  useEffect(() => {
    runQuery();
  }, [runQuery]);

  return { data, isLoading, error, refetch: runQuery };
}

注意事项 #

• 不要在同一次渲染的渲染流程里直接调用刚更新完ref的函数，在事件回调、useEffect副作用里调用是完全安全的，不会出现闭包问题。
• 如果你的queryKey是对象/数组类型，可以额外加一层深比较逻辑判断key是否真的变化，这部分逻辑和queryFn的处理互不影响。
• 这个方案是react-query、ahooks等多数通用Hook库处理用户传入回调的标准方案，没有额外黑魔法，既避免了用户手动记忆化的心智负担，也不会出现闭包陷阱。

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