如何使用useCallback

March 9, 2026

不是，不需要也不建议到处用。React 官方的态度是：默认不用，有明确需要时再用。

需要用 useCallback 的情况

1. 函数作为 useEffect / useMemo 的依赖

const fetchData = useCallback(() => { ... }, [url]);

useEffect(() => {
  fetchData(); // fetchData 在依赖数组里，不缓存会无限触发
}, [fetchData]);

2. 函数传给用 React.memo 包裹的子组件

const Child = React.memo(({ onClick }) => <button onClick={onClick} />);

// 没有 useCallback → 每次渲染新函数 → memo 失效 → 子组件白白重渲染
const handleClick = useCallback(() => { ... }, []);

3. 函数本身很耗时，且频繁被调用（极少见）

不需要用的情况（大多数场景）

// ❌ 没必要，JSX 事件处理器不需要稳定引用
const handleClick = useCallback(() => {
  setCount((c) => c + 1);
}, []);

// ✅ 直接写就行
const handleClick = () => setCount((c) => c + 1);

// ❌ 没必要，函数不在任何依赖数组里
const formatName = useCallback((name) => name.trim(), []);

为什么不该滥用

useCallback 本身也有性能开销（要存储函数 + 比较依赖数组），滥用反而更慢
依赖数组容易写错，引入难以排查的 bug
代码可读性下降

这个文件里的写法（useState 的 setter 函数作为依赖）是合理用法，因为这些函数都被返回出去，外部可能将它们放进 useEffect 依赖数组。