Reducing INP: Event Handler Optimisation
Debounce heavy handlers, use scheduler.yield(), and avoid long tasks that block the main thread.
What Is INP?
Interaction to Next Paint (INP) measures the latency from a user interaction (click, tap, key press) to when the browser paints the response. INP > 200ms feels sluggish.
Why React Events Can Be Slow
React event handlers that do too much work synchronously block the main thread. The browser can't paint the response until the JS task completes — causing high INP.
All lessons in this course
- Measuring Core Web Vitals in React Apps
- Bundle Analysis & Code Splitting Strategy
- Image & Font Optimisation in React
- Reducing INP: Event Handler Optimisation