React useCallback 什么时候不需要用
React useCallback 的定位：它不是“默认选项”
useCallback 是 React 提供的一个 Hook，用于缓存函数实例。它的核心目的是在依赖项不变时，返回同一个函数引用，从而避免不必要的子组件重渲染或作为其他 Hook 的稳定依赖。
但很多开发者在学习 React 后容易陷入一个误区：将所有函数都用 useCallback 包裹。这种“防御性优化”不仅增加代码复杂度，还可能带来反效果。理解何时不需要使用 useCallback 与理解何时使用它同样重要。
何时不应该使用 useCallback
以下六种场景中，useCallback 往往是多余的，甚至是有害的。
1. 回调函数仅作为原生元素的事件处理器
当函数只传给普通的 DOM 元素（<div>、<button>、<input> 等）时，React 不会因为事件处理器的引用变化而重新创建原生 DOM 节点。浏览器原生事件监听器的更新开销极小，几乎可以忽略不计。
// 无需 useCallback：button 只是普通元素，不是被优化的子组件
function MyComponent() {
const handleClick = () => {
console.log('clicked');
};
return <button onClick={handleClick}>Click me</button>;
}
例外：只有当这个原生元素被包裹在 React.memo 中时，才需要稳定的引用。但这种情况很少见。
2. 被传递的子组件没有使用 React.memo 或类似的优化
useCallback 的主要搭档是 React.memo。如果父组件用 useCallback 缓存了函数，但子组件是普通组件（没有 memo 包裹），那么函数引用变化与否都不会阻止子组件因父组件状态更新而重渲染。此时 useCallback 完全是无效开销。
// 即便使用了 useCallback，Child 没有 memo 仍会重渲染
const Parent = () => {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []);
return <Child onClick={handleClick} />;
};
const Child = ({ onClick }) => {
// 每次 Parent 重渲染，这里都会重新执行
return <button onClick={onClick}>Click</button>;
};
原则：先确定子组件是否通过 React.memo、shouldComponentUpdate 或 useMemo 进行了渲染优化，再考虑是否需要用 useCallback 稳定函数引用。
3. 函数依赖项频繁变化，缓存失效极快
useCallback 的缓存能力完全取决于其依赖数组。如果依赖项在每次渲染时都会变化（比如依赖一个频繁更新的 state），那么缓存会立即失效，每次渲染都会创建新函数。这不但没有起到优化作用，反而增加了比较依赖数组的额外运算。
function Component() {
const [text, setText] = useState('');
// 每次输入，text 都会变 -> handleSearch 每次都是新函数
const handleSearch = useCallback(() => {
searchApi(text);
}, [text]); // 依赖频繁变化，缓存无意义
return <input value={text} onChange={e => setText(e.target.value)} />;
}
优化思路：如果必须在这种场景下稳定引用，考虑使用 ref 保存最新值，然后在 useCallback 中使用空依赖数组和 ref.current。
4. 函数本身极其轻量，而 useCallback 开销更明显
useCallback 本身需要存储函数和依赖数组，并在每次渲染时进行依赖比较。如果函数体非常简单（例如仅调用一个 setter），创建新函数的成本可能低于 useCallback 的比较和记忆化成本。盲目使用只会让代码变慢。
// 完全没必要用 useCallback：创建箭头函数几乎零开销
function Component() {
const [visible, setVisible] = useState(false);
const toggle = () => setVisible(v => !v); // 直接定义即可
return <button onClick={toggle}>Toggle</button>;
}
5. 函数仅作为自定义 Hook 的返回值，且该 Hook 内部已做稳定化
如果函数来自某个自定义 Hook，而该 Hook 内部已经通过 useCallback 或其他方式返回了稳定的引用，那么在组件中再次包裹 useCallback 就是多余的。
// useToggle 内部已返回稳定的 toggle 函数
function useToggle(initial = false) {
const [state, setState] = useState(initial);
const toggle = useCallback(() => setState(s => !s), []);
return [state, toggle];
}
function Component() {
const [isOn, toggleIsOn] = useToggle();
// toggleIsOn 已经是稳定引用，无需再包一层 useCallback
return <Switch checked={isOn} onChange={toggleIsOn} />;
}
6. 在效果 Hook 的依赖数组中，用 ref 代替 unstable callback
当一个函数需要在 useEffect 中调用，但又不想因为函数引用变化而频繁触发 effect 时，一种常见的反模式是：用 useCallback 包裹函数并填入 effect 的依赖。但如果该函数本身的依赖也很多，会导致依赖链变长。更轻量的方式是使用 useRef 保存最新函数，然后 effect 只依赖一个稳定的 ref。
function Component({ onSubmit }) {
const onSubmitRef = useRef(onSubmit);
onSubmitRef.current = onSubmit; // 始终指向最新回调
useEffect(() => {
// 使用 ref.current，无需将 onSubmit 放入依赖数组
const handler = () => onSubmitRef.current('data');
window.addEventListener('custom', handler);
return () => window.removeEventListener('custom', handler);
}, []); // 真正的稳定依赖
// ...
}
在这种情况下，为 onSubmit 增加 useCallback 就是不必要的。
总结：决策清单
在打算使用 useCallback 之前，快速问自己三个问题：
- 这个函数是否被传递给经过优化的子组件（
React.memo等）？ 如果不是，跳过。 - 依赖项是否会在多次渲染中保持稳定？ 如果频繁变化，缓存无效。
- 有没有更简单的方式保持引用稳定（如
useRef、提取到组件外部）？ 如果答案是是，就不要用useCallback。
遵循“先测量，后优化”的原则。没有性能问题时，保持代码简洁比任何预先优化都更有价值。