React组件内原生输入事件使用useCallback是否有性能或易用性收益？

结论 #

在你给出的示例场景下，没有任何正向收益，反而会带来额外的性能开销。 #

原因分析 #

1. useCallback的核心作用是缓存函数引用，而非减少函数创建的成本：
   不管是否用useCallback包裹，每次组件重渲染时，你传入useCallback的回调函数都会被重新创建，它只是在依赖项未变更时，返回上一次缓存的函数引用，这个缓存、依赖比对的过程本身就有额外开销。
2. 绑定到原生DOM元素的事件回调不需要稳定引用：
   原生标签（比如示例中的<input>）的事件处理函数，即使每次传入新的函数引用，React更新事件监听器的开销极小，完全抵消不了useCallback带来的额外成本。

两种写法的对比 #

写法1（使用useCallback）

const Foo = () => {
  const [count, setCount] = useState(500);

  const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setCount(Number(e.target.value));
  }, [setCount]);

  return (
    <>
      <div>
        Delay: <input value={count} onChange={onChange} type="number" />
      </div>
    </>
  );
};

执行流程：每次重渲染创建新的匿名函数 -> 比对setCount依赖项 -> 返回缓存的旧函数引用，多了两步额外操作。

写法2（不使用useCallback）

const Foo = () => {
  const [count, setCount] = useState(500);

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCount(Number(e.target.value));
  };

  return (
    <>
      <div>
        Delay: <input value={count} onChange={onChange} type="number" />
      </div>
    </>
  );
};

执行流程：直接创建函数赋值，没有额外的缓存和依赖比对开销，性能更优。 #

什么情况下才需要使用useCallback？ #

只有满足以下任一条件时，useCallback才会带来正向收益：

• 回调函数需要传递给子组件，且子组件使用React.memo进行了浅比较优化，稳定的函数引用可以避免子组件不必要的重渲染
• 回调函数是其他Hook（useEffect、useMemo等）的依赖项，稳定的引用可以避免这些Hook不必要的重复执行

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