如何处理子组件/自定义Hook依赖的回调函数？

核心场景分析 #

父组件每次渲染都会生成新的onChange回调，若子组件将其直接放入useEffect依赖数组，会导致useEffect频繁触发，引发不必要的副作用执行（如重复请求、订阅）。在无法修改父组件回调定义（不能用useCallback包裹、不能移到作用域外）的前提下，子组件侧的最优处理方式如下：

现有方案分析 #

方案1：将onChange直接加入useEffect依赖 #

function Child({ onChange }) {
    useEffect(() => {
        onChange(changingValue);
    }, [changingValue, onChange]);
}

缺点：父组件每次渲染都会生成新的onChange函数，导致useEffect依赖数组每次都变化，无论changingValue是否改变，副作用都会重复执行，严重浪费性能。

方案2：用useRef保存最新回调（函数体内直接更新） #

function Child({ onChange }) {
    const callbackRef = useRef();
    callbackRef.current = onChange;

    useEffect(() => {
        callbackRef.current(changingValue);
    }, [changingValue]) 
}

优势：

• useEffect仅依赖changingValue，只有当changingValue变化时才执行副作用，避免不必要的重复触发。
• 每次子组件渲染时，都会将最新的onChange赋值给callbackRef.current，副作用执行时调用的始终是最新的回调，不会出现陈旧闭包/函数问题。
  潜在注意点：React渲染是同步流程，函数体赋值会在useEffect（异步执行）前完成，绝大多数场景下无需担心回调更新不及时的问题。

方案3：用useLayoutEffect更新ref #

function Child({ onChange }) {
    const callbackRef = useRef();

    useLayoutEffect(() => {
        callbackRef.current = onChange;
    });

    useEffect(() => {
        callbackRef.current(changingValue);
    }, [changingValue]);
}

适用场景：仅当你需要确保回调在DOM更新后、浏览器绘制前就完成更新（比如副作用依赖回调操作DOM）时才需要用这种方式。对于普通的状态更新类回调，方案2已经足够，这个方案属于过度优化，会增加不必要的同步执行开销。

最优实现方式 #

推荐直接使用方案2的ref保存回调模式，若需要复用逻辑，可以封装成自定义Hook（不违反限制，因为是在子组件侧处理）：

// 自定义Hook：获取最新的回调引用
function useLatest(callback) {
  const ref = useRef();
  ref.current = callback;
  return ref;
}

// 子组件中使用
function Child({ onChange }) {
  const onChangeRef = useLatest(onChange);
  
  useEffect(() => {
    onChangeRef.current(changingValue);
  }, [changingValue]);
}

这个Hook能确保你在任何时候调用的都是最新的回调，同时避免useEffect依赖频繁变化的问题，也不会有陈旧闭包风险。

关于陈旧函数/闭包问题的说明 #

只要确保每次渲染时都将最新的回调赋值给ref.current，副作用中通过ref.current调用回调，就不会出现陈旧闭包问题。因为ref是可变容器，其current属性会随着子组件接收新的onChange props而更新，副作用执行时总能拿到最新的函数引用，访问到父组件最新的状态和上下文。

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