Summary
High-priority UI waits on low-priority async completion because shared lock/order — e.g. await slow fetch before paint urgent banner. Separate critical path from background sync; don't chain unrelated awaits in one effect. INP regressions often from priority inversion on main thread.
Code example
async function showDashboard() {
renderSkeleton(); // urgent paint first
const data = await fetchMetrics(); // don't block banner
startTransition(() => setMetrics(data));
}
Key points
- High-priority UI waits on low-priority async completion because shared lock/order — e.g.
- await slow fetch before paint urgent banner.
- Separate critical path from background sync; don't chain unrelated awaits in one effect.
- INP regressions often from priority inversion on main thread.