使用useCallback后父组件状态变更仍触发子组件重渲染，问题出在哪？

你当前的useCallback写法本身没有错误，但FileTree仍会重渲染，核心原因大概率出在以下两个环节：

1. FileTree组件未用React.memo做缓存 #

默认情况下，父组件（NoteList）只要发生重渲染，不管子组件的props有没有变化，子组件都会跟着重渲染。你给回调函数加useCallback是为了保证引用稳定，但如果子组件本身没做缓存优化，这个操作就起不到阻止重渲染的作用。

解决办法：给FileTree组件套一层React.memo，让它仅在props真正发生变化时才重渲染：

const FileTree = React.memo(({ prop1, prop2, handleCreateFolder, setFolderName }) => {
  // 组件原有逻辑
});

2. prop1Value的引用不稳定 #

如果prop1Value是每次NoteList渲染时都会重新生成的值（比如直接在组件内定义的对象/数组，或是未用useMemo缓存的计算结果），哪怕内容没变，它的引用也会每次更新，导致FileTree的props发生变化，触发重渲染。

比如这类写法都会导致引用不稳定：

// 每次渲染都会新建对象
const prop1Value = { id: 1, name: 'default' };
// 每次渲染都会重新执行过滤计算
const prop1Value = rawData.filter(item => item.status === 'active');

解决办法：用useMemo缓存prop1Value，确保引用稳定：

const prop1Value = React.useMemo(() => {
  // 这里写prop1Value的生成逻辑
  return { id: 1, name: 'default' };
}, [/* 依赖项：只有当这些值变化时，才重新生成prop1Value */]);

额外检查点 #

确认handleCreateFolder的依赖项是否完整：如果函数内部用到了NoteList的其他状态或变量，必须把这些变量加到useCallback的依赖数组中，否则会引发闭包问题，也可能间接导致不必要的重渲染（你当前的依赖数组为空，若函数内未用到外部变量则没问题）。

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