为何无状态变更时startTransition仍会触发高优先级更新与重渲染？

Great question—this behavior can seem counterintuitive at first, but it all ties back to how React’s useTransition hook works under the hood. Let’s break down your three questions one by one, using your example code as a reference.

1. Why does a re-render happen even with an empty callback? #

The key here is the isPending state returned by useTransition. When you call startTransition, React immediately flips this internal pending flag to true (to signal a transition is underway) before running your callback. Even if your callback does nothing, React then sets the flag back to false once the transition "completes."

These two state changes (false → true → false) trigger component re-renders. In some cases, React might batch these updates so you only see one render log instead of two, but the underlying state shifts are still happening. Your example doesn’t use isPending in the JSX, but React still tracks it internally to maintain the hook’s functionality—hence the unexpected re-render.

2. Is this re-render a high-priority update? #

Partially, and it depends on which phase of the transition you’re looking at:

• The initial update to set isPending to true is a high-priority update. React prioritizes this because it’s meant to give users immediate feedback (like showing a loading spinner while low-priority work runs).
• After the empty callback finishes, the update to set isPending back to false is typically a low-priority update—though in your simple example, it might run so quickly that you don’t notice a difference in timing.

The blog post’s claim about "high-priority updates" refers to that initial isPending toggle, which is accurate. The second toggle (back to false) is lower priority, but it’s easy to miss in a minimal test case.

3. Does this weaken startTransition’s original purpose? #

Not at all—here’s why:

• The extra re-renders are extremely lightweight. Since isPending is a boolean state, updating it has negligible performance impact, especially compared to the heavy, non-urgent updates startTransition is designed to handle (like filtering large datasets or rendering complex UI).
• This behavior is intentional: isPending exists to let developers show loading states during transitions, which is a core part of the hook’s usability. Even if you don’t use isPending in your component, React needs to manage this state to uphold the hook’s contract.
• In real-world usage, you’ll almost never call startTransition with an empty callback. The hook’s main job is to mark state updates inside the callback as low-priority, and that functionality works exactly as intended when you have actual updates to defer.

Quick Verification Test #

If you modify your code to log the isPending value, you’ll see it toggle on and off with each click:

export default function App() {
  const [isPending, startTransition] = useTransition();
  console.log("render, isPending:", isPending);
  return (
    <button onClick={() => startTransition(() => {})}>
      Start Transition
    </button>
  );
}

You’ll likely see two logs per click (one for isPending: true, one for isPending: false)—or React might batch them into a single render in some environments, but the state changes still occur.

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