UI performance: the cheap wins first
Before you reach for virtualization, fix the easy stuff. A short list of high-leverage moves.
16 / 02 / 251 min read
The order I actually attack a slow UI, before doing anything clever:
- Stop re-rendering the world. Find the parent that re-renders on every keystroke and pull the input into its own component. This alone fixes 80% of "the app feels laggy" complaints.
- Memoize the expensive child, not every child.
React.memoeverywhere makes things slower, not faster. Profile first. - Defer images.
loading="lazy",decoding="async", real dimensions on the<img>tag. Layout shift kills perceived perf more than load time. - Don't ship the heavy library on first paint. Code-split the chart, the editor, the date picker. Render a skeleton.
- Then, and only then, consider virtualization, web workers, or moving work to the server.
Most of the time you don't get past step 2. Virtualization is for when you actually have ten thousand rows — not for when you have a hundred and they feel slow because something else is wrong.