Skip to content

.tip

· one of the small things

Wrap state updates that trigger heavy renders in startTransition

Switching to a tab with a heavy panel freezes the click. Mark the update as a transition and React keeps the old screen interactive, then shows the new one when it's ready.

const [pending, startTransition] = useTransition();
onClick={() => startTransition(() => setTab("analytics"))}

pending is true while it renders, so that's your spinner. Urgent updates, like the input's own value, stay outside the transition.

reactperformance