React Context更新后子组件memo新旧props值一致问题排查

问题场景与现象 #

在基于React Context实现的Todo应用中，点击Todo项的状态切换按钮时，Context Provider中的状态已正确更新，但TodoListItem组件因React.memo的自定义对比函数判定新旧props完全相同，未触发重渲染，导致UI无法同步状态变化。

核心问题分析 #

1. 直接修改原TodoItem对象，导致引用未更新 #

在TodoContext.tsx的toggleItemState函数中，通过item.state = state直接修改了原数组中的TodoItem对象。这种原地修改对象的方式会导致：

• 更新后的数组中，目标TodoItem的引用与原对象完全一致
• TodoListItem接收到的新旧item props是同一个对象，即使state字段已被修改，prevProps.item === newProps.item仍为true
• 自定义对比函数中，prevProps.item.state和newProps.item.state会读取到相同的值（因为原对象已被修改）

2. useCallback依赖缺失，函数引用不稳定 #

ShowTodoList中的handleToggleState和handleDelete使用useCallback时未添加依赖项，导致这两个函数始终保持初始引用。虽然这不是本次重渲染失败的直接原因，但会引发潜在问题（比如调用旧版本的Context函数）。

解决方案 #

步骤1：修复状态更新逻辑，创建新对象而非原地修改 #

修改TodoContext.tsx中的toggleItemState函数，返回新的TodoItem对象代替修改原对象：

const toggleItemState = React.useCallback(function(itemId: string, state: TodoStateFilter) {
  console.log("toggle state changing state of todo item ", itemId, ' to ',state);
  setItems((currentItems) => {
    console.log("FOO toggle state updating currentItems", currentItems)
    const updatedItems = currentItems.map((item) => {
      if (item.id === itemId) {
        // 创建新对象，保持原对象不变
        return {...item, state: state};
      }
      return item;
    });
    console.log('toggle state updated ', updatedItems)
    console.log('toggle state updated array reference has changed? ', updatedItems!==currentItems)
    return updatedItems;
  });
}, []);

步骤2：给Context中的函数添加useCallback，稳定引用 #

为deleteItem和toggleItemState包裹useCallback，避免Provider每次渲染时创建新的函数引用，减少不必要的Context消费者重渲染：

const deleteItem = React.useCallback(function (itemId: string) {
  console.log("removing todo item ", itemId);
  setItems((currentItems) => {
    const remainingItems = currentItems.filter((item) => {
      return item.id !== itemId;
    });
    return [...remainingItems];
  });
}, []);

步骤3：补全useCallback的依赖项 #

修改ShowTodoList.tsx中的handleToggleState和handleDelete，添加对应的Context函数作为依赖：

const handleToggleState = React.useCallback((itemId,newState) => {
  console.log('toggle state reached inside ShowTodoList ', itemId, newState)
  toggleItemState(itemId, newState);
}, [toggleItemState]);

const handleDelete = React.useCallback((itemId) => {
  deleteItem(itemId)
}, [deleteItem])

原理说明 #

• 通过创建新的TodoItem对象，确保更新后的数组中目标项的引用与原对象不同，React.memo的对比函数会检测到prevProps.item !== newProps.item，从而触发重渲染
• 使用useCallback稳定Context函数和事件处理函数的引用，避免因函数引用变化导致的不必要重渲染

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