A practical guide to using requestAnimationFrame (rAF) for smooth web animations and better performance. Covers how rAF fits into the browser event loop (running after tasks but before layout and paint), compares it to setTimeout, and shows framework-specific usage in React (useEffect) and Vue (VueUse). Also explains the rAF→setTimeout pattern for improving Interaction to Next Paint (INP) by guaranteeing a paint between user interaction and heavy logic. Includes a comparison table of scheduling APIs: requestIdleCallback, scheduler.yield, scheduler.postTask, and Promise.then, with guidance on when to use each.
Table of contents
What Is requestAnimationFrame ? requestAnimationFrame vs setTimeout Framework-Specific Usage requestAnimationFrame and Interaction to Next Paint (INP) The Powerful Pattern: rAF → setTimeout How rAF Compares to Other Scheduling APIs Summary Monitor Core Web Vitals Monitor Page Speed & Core Web Vitals5 Impressions