React useTransition Hook工作原理及页面无响应问题排查

核心问题 #

你把同步阻塞的5秒while循环直接放在了startTransition的回调里，这彻底打乱了React的优先级调度逻辑，导致页面卡死。

底层原因 #

• useTransition的核心作用是标记回调内的状态更新操作为低优先级，让React可以中断这个更新流程，优先处理用户交互（比如点击fast按钮）这类高优先级任务。
• 但startTransition的回调本身是同步执行的——如果回调里有阻塞主线程的代码（比如这个死循环），主线程会被完全占满，React根本没机会去处理其他任务，自然整个页面会陷入无响应状态。
• 官方文档里的“慢操作”指的是大量状态更新或耗时的渲染任务，而非直接阻塞主线程的同步代码，这是你误解API用法的关键。

修复方案 #

把阻塞主线程的同步逻辑改成异步操作（比如setTimeout），让主线程能腾出时间处理其他任务，这样useTransition的优先级调度才能生效：

import { useState, useTransition } from "react";

function Component() {
  const [slow, setSlow] = useState(0);
  const [fast, setFast] = useState(0);

  const [isPending, startTransition] = useTransition();

  const handleSlowClick = () => {
    startTransition(() => {
      // 用异步操作替代同步阻塞的while循环
      setTimeout(() => {
        setSlow((prev) => prev + 1);
      }, 5000);
    });
  };

  const handleFastClick = () => {
    setFast((prev) => prev + 1);
  };

  return (
    <>
      <button onClick={handleSlowClick}>slow - {slow} {isPending && "(pending)"}</button>
      <button onClick={handleFastClick}>fast - {fast}</button>
    </>
  );
}

export default Component;

额外说明 #

如果你的实际场景是真实的耗时计算（比如大数据处理），不要用setTimeout凑数，应该把计算逻辑放到Web Worker中执行，避免阻塞主线程。计算完成后通过postMessage通知组件，再用startTransition标记后续的状态更新为低优先级，这才是符合React并发模型的正确做法。

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