React中，避免memo子组件无效重渲染是否为useCallback的核心用途？

是的，保持函数引用稳定以配合React.memo避免子组件不必要重渲染，确实是useCallback最主要的通用用途。

背后的逻辑 #

• React组件每次重渲染时，内部定义的所有函数都会被重新创建，导致函数引用发生变化。
• 即便子组件用React.memo包裹（通过浅比较props判断是否重渲染），如果父组件传递的函数引用更新了，memo的浅比较就会失效，子组件还是会触发不必要的重渲染。
• useCallback的核心作用就是：当依赖数组里的变量没有变化时，返回同一个函数引用，让React.memo的浅比较能正常生效，从而阻止子组件的无效重渲染。

你示例中的误区 #

你的示例里存在一个问题：虽然用useCallback定义了handleIncrement，但传递给Child时又套了一层匿名函数() => handleIncrement()——这会导致每次父组件重渲染时，都会生成新的匿名函数引用，memo的检查依然失效。正确的写法应该直接传递handleIncrement，同时建议用函数式更新来优化依赖：

const Parent = () => { 
  const [state, setState] = useState("1"); 

  const handleIncrement = useCallback(() => { 
    setState(prevState => prevState + 1);  
  }, []); // 函数式更新可以移除state依赖，让函数引用更稳定

  return (  
    <Child handle={handleIncrement} /> 
  );
}

const Child = memo(({handle}) => {
  return <button onClick={handle}>Increment</button>;
});

补充说明 #

useCallback偶尔也会用于其他场景（比如配合useEffect监听函数变化，或者保持函数引用稳定以作为其他Hook的依赖），但这些场景的使用频率远低于配合React.memo优化子组件渲染的场景。同时要注意：如果子组件没加React.memo，或者函数不需要传递给外部组件/作为Hook依赖，滥用useCallback反而会增加内存开销，完全没必要。

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