React中pointermove触发setState后组件重复渲染4次问题求助

问题还原 #

在使用@use-gesture库的pointermove事件触发setState时，出现单次状态更新却导致组件渲染4次的异常情况：

• 开启React严格模式时渲染4次，关闭后变为2次
• 已确认setShowContent仅被调用一次
• 将事件替换为click/touchstart，或把React.lazy改为普通组件导入，重复渲染问题消失

代码示例：

const Content = React.lazy(async () => import('./Content'));

// ...

const [showContent, setShowContent] = useState(false);
console.log('render'); // 严格模式下输出4次

// ...

elem.on('pointermove', () => {
  if (isFirstMove) {
    setShowContent(true);
    console.log('first pointermove'); // 仅输出一次
    isFirstMove = false;
  }
});

// ...

<Suspense fallback={<Spinner />}>
  {showContent && <Content />}
</Suspense>

核心原因拆解 #

1. React严格模式的双重渲染机制 #

React 18+的严格模式（仅开发环境生效）会主动执行两次渲染流程（初始化、状态更新阶段均包含），目的是检测组件中未被清理的副作用（比如未取消的订阅、泄露的定时器）。这是渲染次数加倍的第一个触发因素。

2. React.lazy + Suspense的异步加载触发两次渲染 #

当showContent变为true时，React.lazy组件会启动异步导入目标模块：

• 导入开始前，Suspense会渲染fallback内容，触发一次组件渲染
• 导入完成后，Suspense切换为渲染真实的Content组件，再次触发组件渲染
  这带来了第二次渲染次数的加倍。

3. pointermove事件的并发调度特性 #

pointermove属于连续触发的非离散事件，React对这类事件的状态更新会采用并发调度机制处理；而click/touchstart属于离散事件，更新会被同步执行。
在pointermove场景下，React的并发调度会把Suspense的两次渲染（fallback→真实组件）和严格模式的两次渲染完全叠加，最终出现4次渲染；换成离散事件时，React会同步合并更新流程，严格模式的双重渲染会覆盖Suspense的两次渲染步骤，最终仅出现2次渲染。

验证与解决方案 #

验证点 #

• 关闭严格模式：严格模式的双重渲染消失，仅剩下Suspense加载前后的2次渲染，符合观测结果
• 替换为离散事件：同步更新流程让渲染次数合并，严格模式下仅2次渲染
• 移除React.lazy：没有异步加载的切换，严格模式下2次渲染，生产环境1次

解决方案 #

1. 使用useTransition优化调度
   用useTransition标记状态更新为低优先级，让React合理调度Suspense的渲染流程，避免叠加重复渲染：

import { useTransition } from 'react';

// ...

const [startTransition, isPending] = useTransition();

elem.on('pointermove', () => {
  if (isFirstMove) {
    startTransition(() => {
      setShowContent(true);
    });
    isFirstMove = false;
  }
});

2. 预加载React.lazy组件
   在组件初始化时提前触发模块导入，避免在pointermove事件触发时才开始加载，消除Suspense的渲染切换：

const Content = React.lazy(async () => import('./Content'));

useEffect(() => {
  // 预加载Content组件
  import('./Content');
}, []);

3. 临时关闭严格模式（不推荐长期使用）
   如果只是开发阶段排查问题，可以暂时移除根组件的<StrictMode>包裹，但严格模式的副作用检测功能会丢失，不建议长期关闭。

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