为何使用useCallback后ChildComponent仍会重渲染？

核心原因 #

父组件中anotherProp状态更新会触发父组件重渲染，React中子组件默认会随父组件重渲染，无论自身props是否变化。你虽然用useCallback缓存了handleInputChange，但没有给子组件添加防重渲染的逻辑，所以父组件重渲染时子组件必然跟着刷新。

另外你的handleInputChange还存在依赖项冗余问题：依赖pageTitle完全没必要，反而会导致每次pageTitle变化时，回调函数都会重新创建，浪费了useCallback的缓存作用。

解决方案 #

1. 给子组件添加React.memo包裹：让子组件仅在props发生浅变化时才重渲染
2. 优化handleInputChange的依赖项：使用函数式更新，移除不必要的依赖

修改后的子组件代码

import { memo } from "react";

function ChildComponent({ title, handleInputChange }) {
  console.log("Child Component renders");
  return (
    <>
      <input type="text" onChange={handleInputChange} />
      <h1>{title}</h1>
    </>
  );
}

export default memo(ChildComponent);

修改后的App.js中handleInputChange部分

const handleInputChange = useCallback(
  (e) => {
    // 函数式更新，无需依赖pageTitle
    setPageTitle(() => e.target.value);
  },
  [] // 空依赖数组，回调仅初始化时创建一次
);

效果验证 #

修改完成后，点击「Increment Count」按钮时，父组件因anotherProp更新重渲染，但子组件的title和handleInputChange都未发生变化，因此子组件不会触发重渲染，符合你的预期。

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