React中memo与useCallback未按预期工作的问题排查

核心原因分析 #

你遇到的问题大概率是以下几个常见错误导致的：

1. 使用数组索引作为key值 #

如果在records.map()时用index作为子组件的key，当删除一条记录后，后续所有记录的key都会发生偏移（比如原来第2条的key是1，删除第1条后它的key变成0）。React会把这些key变化的组件判定为全新组件，从而触发全部重渲染。

错误示例：

records.map((record, index) => (
  <RecordItem key={index} record={record} removeRecord={removeRecord} />
))

2. useCallback的依赖项配置错误 #

如果removeRecord的依赖项包含了整个records数组，或者依赖项在每次渲染时都会生成新引用，会导致useCallback每次都返回新的函数实例。子组件接收的removeRecord props变化，就会绕过memo触发重渲染。

错误示例：

const removeRecord = useCallback((id) => {
  setRecords(records.filter(item => item.id !== id))
}, [records]) // 依赖整个records数组，每次更新都会生成新函数

3. 传递给RecordItem的record对象存在引用变化 #

如果records中的元素是每次渲染时新创建的对象（比如在渲染函数里生成、或者修改时返回了全新的对象但结构变化），即使内容没变，引用变化也会让memo判定props更新，触发重渲染。

4. memo的使用场景不匹配 #

如果RecordItem内部使用了useContext且上下文值发生变化，或者组件内部有自己的状态更新，memo无法阻止其重渲染。

对应解决方案 #

• 替换key值：改用每条记录的唯一标识（比如record.id）作为key，确保删除操作后剩余记录的key保持稳定：

  records.map((record) => (
    <RecordItem key={record.id} record={record} removeRecord={removeRecord} />
  ))
  

• 修正useCallback依赖项：使用函数式更新的方式修改records，避免依赖整个数组，只依赖setRecords：

  const removeRecord = useCallback((id) => {
    setRecords(prevRecords => prevRecords.filter(item => item.id !== id))
  }, [setRecords]) // setRecords是稳定的引用，不会触发useCallback更新
  

• 确保record引用稳定：如果records是从外部传入或者经过处理生成的，确保处理逻辑不会每次渲染都生成新的对象引用（比如用useMemo缓存处理后的数组）。

• 检查RecordItem内部逻辑：确认组件没有依赖变化的上下文，或者内部状态更新导致的重渲染。

内容的提问来源于stack exchange，提问作者Guilherme Kauã