I'm working on a long list of items. For that I'm using react-virtualized (https://github.com/bvaughn/react-virtualized). But I'm facing the below issue.
When I try scrolling to the bottom for 2 seconds, it's blank then data is loading. It's not very smooth. This https://2v9j5.csb.app/ is the CodeSandBox link.
As I inspected in this use case we shouldn't remount the root div for the rowRenderer : <div key={key} style={style}> on scrolling as used on the docs, so this should fix the performance problem :
function rowRenderer({ key, index, isScrolling, style }) {
const content = isScrolling ? (
<div>Scrolling...</div>
) : (
<ListItem idx={index} item={airports[index]} />
);
return (
<div key={key} style={style}>
{content}
</div>
);
}