Brace Your React, New Core Web Vitals are Coming

on YouTube ↗23m

" summary

Google promotes a new metric Interaction to Next Paint (INP) which becomes a Core Web Vital in March 2024 and already flags big sites while other metrics stay green. A note‑taking demo shows typing causing 600–700 ms freezes because React renders everything synchronously; splitting state and wrapping the list update with useTransition() via startTransition yields responsive typing, giving React 5 ms work slices and pushing heavy renders non‑urgent so INP drops (works in the demo).

AI-written summary · about

" chapters (7)

1. 0:00New Core Web Vitals intro
2. 1:49Interaction to Next Paint
3. 6:30Slow React interactions debug
4. 8:17Optimizing with useTransition
5. 14:38How useTransition works
6. 18:55Suspense for hydration
7. 22:29Summary and call

" related talks

• 08mExploring the future of Core Web VitalsAnnie Sullivan, Michal Mocny · Chrome Dev Summit 2020
• 24mUnderstanding and Optimizing Interaction to Next Paint (INP)Jeremy Wagner · JSConf Korea 2022
• 44mBreaking Down Long TasksNishu Goel · performance.now() 2023
• 16mThe state of responsiveness on the webAnnie Sullivan, Michal Mocny · Google I/O 2022
• 25mCore Web Vitals under controlMarta Wiśniewska · JNation 2024
• 25mA look under the hood of the new INP metricZuzana Šumlanská · FrontKon 2023
• 49mThe Unbearable Weight of Massive JavaScriptRyan Townsend · Pixel Pioneers 2024
• 27mSlashing Performance Bottlenecks and Poor User ExperienceHenri Helvetica · React Brussels 2023