状态变更为相同值时的React组件渲染行为问题排查

核心原因 #

这个问题是React开发模式下Strict Mode的特性导致的，而@testing-library/react的renderHook默认会启用Strict Mode。

详细分析 #

你的useRenderCount Hook逻辑是：每次组件函数执行时，将useRef存储的计数加1并返回，因此组件函数每执行一次，计数就会+1。我们拆解测试流程的关键节点：

• 初始渲染：组件函数执行1次，计数为1（符合预期）。
• 调用setText('a')：state值变化，组件函数执行1次，计数变为2（符合预期）。
• 调用setText('a')：新值与旧值完全相同，React会跳过提交阶段的更新，组件函数不会执行，计数保持2（符合预期）。
• 调用setText('b')：此时组件需要进行真实的状态更新，但在Strict Mode的开发模式下，React会额外执行一次组件函数进行副作用检测，导致组件函数被连续调用2次，计数从2直接跳到4，而非你预期的3。

第二个测试中多次调用setText('a')后再设'b'结果仍为4，是因为不管多少次相同值的setState，只要最后触发真实的state更新，Strict Mode都会触发这次额外的渲染校验，所以计数只会额外增加1次（总共+2）。

解决方法 #

有两种可行的解决方式：

1. 禁用测试中的Strict Mode

在renderHook的配置选项中指定wrapper，直接返回子组件即可禁用Strict Mode，这样组件函数在真实更新时只会执行一次：

const { result } = renderHook(() => {
  const [text, setText] = useState('');
  const renderCount = useRenderCount();
  return { setText, renderCount, text };
}, { 
  wrapper: ({ children }) => children
});

2. 调整useRenderCount的实现

如果需要在Strict Mode下也能准确统计渲染次数，可以改用useEffect来实现（React在Strict Mode下不会对useEffect的回调进行双重执行）：

import { useRef, useEffect } from 'react';

export const useRenderCount = () => {
  const renderCount = useRef(0);
  
  useEffect(() => {
    renderCount.current++;
  }); // 无依赖项，每次渲染完成后执行

  return renderCount.current;
};

这种实现会在组件完成真实渲染（提交阶段）后才增加计数，不受Strict Mode的双重渲染影响，计数会准确反映组件的实际渲染次数。

补充说明 #

Strict Mode的双重渲染是开发模式独有的特性，用于帮助开发者检测组件中的非纯副作用（比如在组件函数中直接修改全局状态），生产模式下不会有这个行为，因此你的原始useRenderCount在生产环境中可以正常工作。

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