I have a list with a few thousand products, and when I scroll, the app starts lagging badly. I tried regular virtualization, but it doesn't help much. Maybe there's some modern approach I'm missing?
Have you actually profiled the app, or are you just guessing? Because if virtualization isn't helping, the lag is probably coming from the fact that you're re-rendering the entire list every time the state changes - even if there are only 20 visible elements, React might be recalculating data for all 5000. Try wrapping your row components in `React.memo` and make sure you're not creating new handler functions on every render (use `useCallback`).
First off, forget about regular virtualization if it's not helping - the problem is most likely not in the rendering itself, but in the fact that you're pulling too much data at once or recalculating it every time you scroll. Check if you're using `memo`, `useMemo`, and `useCallback` correctly - components often end up being recalculated for no reason. It's also useful to profile your app through React DevTools Profiler to see where exactly the bottleneck is: it could be the list rendering itself, or it could be that you're making server requests every time you scroll or recalculating complex logic.
If you're already using virtualization, try increasing the rendering window size (overscan) or switch to pagination instead of infinite scroll - sometimes that's just simpler and faster.
Into memoizing your selectors and callback functions - often the lag isn't coming from the render itself, but from the fact that filters, sorting, or new handler functions get recalculated every time you scroll! Try wrapping your selectors in `useSelector` with proper comparison or use `useMemo` for computations - this can give you a much bigger performance boost than just virtualization alone.
Check how many data attributes and classes you're attaching to each list item. Often the lag doesn't come from the number of DOM nodes themselves, but from the browser constantly recalculating styles and layout because of class changes during scrolling. If you're dynamically adding classes for active items or hover states, that can become a bottleneck. Try moving this to CSS using `nth-child` or a separate layer with `position: fixed` so the browser doesn't touch your main list.
Second thing - make sure you're not creating new objects in props on every render. For example, if you're passing `style={{ color: item.color }}` instead of a precomputed value, React will see different objects and recompute the component. Even with memoization this can slow things down. Better to prepare styles ahead of time or use CSS variables.
And one more thing: if you've got thousands of items in the list, even virtualization can be slow if you're creating too many DOM nodes in the viewport at once. Try reducing how many rows you render at a time - show only the visible part plus a small buffer above and below. Most virtualization libraries let you configure this with a parameter like `overscanRowCount`.
Actually, virtualization usually works great, but if it's actually helping with rendering - then the lag is coming from somewhere else. One common thing people miss: you might have an issue with infinite scroll and data loading. If you're making a request to your backend for a new batch of products on every scroll and not caching the results, the browser isn't lagging because of DOM nodes - it's lagging from network delays and JSON parsing.
Second thing to check - did you configure the virtualization dimensions correctly? A lot of people set the item height way too small in the config, and then a library like react-window ends up recalculating which items are visible practically on every pixel of scroll. Try increasing the buffer and explicitly setting the row height instead of relying on auto-calculation.
Log into answer.
