Why it matters
An update that re-renders more than a few hundred components in a single commit blocks the main thread for the whole render, which shows up as a dropped frame or a slow interaction. It usually means a broad context value or top-level state changed.
How to fix it
Find the state that changed (the parent in the evidence) and narrow what it re-renders: split the context by update frequency, read stores through selectors, move the state down, or animate with CSS/WAAPI instead of React state.
Example
// split a hot value out of a wide context
<ThemeContext value={theme}>
<ScrollContext value={scroll}>{children}</ScrollContext>
</ThemeContext>References
More smoothness rules
void smooth reports 18 rules in this category. How the page feels after it loads: dropped frames during a scripted scroll, long animation frames, INP of real clicks, shifts after input, animated layout properties, idle rAF loops and reduced-motion handling.
reduced-motion-ignoredAnimations keep running with prefers-reduced-motionraf-loop-idlerequestAnimationFrame loop runs while idlescroll-timeline-no-fallbackContent is invisible without scroll-driven-animation supportmultiple-webgl-contextsMultiple WebGL contextsreact-commits-on-scrollReact re-renders while the page scrollsreact-wasted-rendersReact component re-renders with unchanged propsreact-idle-commitsReact keeps committing while the page is idlereact-no-namesReact component names are minified