回调依赖频繁更新时使用React useCallback是否有意义？

闭包陷阱问题原因 #

函数组件每次渲染都会生成独立的作用域，useCallback 会把生成时所在作用域的变量捕获保存下来。如果你的依赖数组没有包含 hiddenField、amountField，useCallback 就会一直复用第一次生成的回调，回调内访问的永远是首次渲染时的旧变量值，自然会出现判断逻辑不符合预期的问题。

当前场景下 useCallback 的使用价值 #

你现在的写法忽略了必要依赖，本身存在逻辑隐患，这种情况下用 useCallback 没有意义，反而会引入线上bug。
只有同时满足以下两个条件时，useCallback 才能带来实际的性能收益：

• 子组件 ButtonComponent 已经用 React.memo 包裹，会对传入的props做浅比较来避免不必要的重渲染
• 回调函数的引用变化是导致子组件频繁重渲染的主要原因

如果不满足以上条件，直接使用普通函数定义回调即可，不必要的useCallback反而会增加额外的内存开销，性能优化的收益可以忽略不计。

可行的优化方案 #

如果确认确实需要缓存回调函数，可以通过useRef存储可变依赖来解决依赖频繁变化的问题，既保证能拿到最新值，也不会让useCallback频繁生成新的函数实例：

import { useCallback, useRef } from 'react';

export function TestComponent({ field, hiddenField, amountField, changeField }) {
  // 用ref存储会频繁变化的依赖，每次渲染更新最新值
  const dynamicDepsRef = useRef();
  dynamicDepsRef.current = {
    hiddenField,
    amountField,
    changeField
  };

  const selectItem = useCallback(() => {
    const { hiddenField, amountField, changeField } = dynamicDepsRef.current;
    const fieldId = field.attributes.Id;
    if (hiddenField.get('id') !== fieldId) {
      changeField(hiddenField, fieldId);
    }
    changeField(amountField, field.attributes.amount);
  }, [field.attributes.Id, field.attributes.amount]);

  return <ButtonComponent field={field} click={selectItem} />;
}

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