bvaughn
React Virtualized Window Scroller not rendering new rows
I'm trying to follow the example for the window scroller in react virualized but can't seem to get any new rows to render (See example).
Here's the code I wrote:
const Row = ({ index, isScrolling, isVisible, key, style }) => {
console.log(`Rendering row ${index}`);
return tracks[index] ? (
<TrackItem
key={key}
id={tracks[index].id}
title={tracks[index].title}
artist={tracks[index].artist}
album={tracks[index].album}
explicit={tracks[index].explicit}
albumArtKey={tracks[index].albumArtUrl}
trackKey={tracks[index].trackUrl}
style={style}
/>
) : (
<></>
);
};
return (
<div className="bg-white h-library-full-height">
<Header trackCount={tracks.length} />
<WindowScroller ref={windowScrollerRef}>
{({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
<div className="flex-auto">
<AutoSizer disableHeight>
{({ width }) => (
<div ref={registerChild}>
<List
className="outline-none"
ref={listRef}
autoHeight
height={height}
isScrolling={isScrolling}
onScroll={onChildScroll}
overscanRowCount={5}
rowCount={tracks.length}
rowHeight={48}
rowRenderer={Row}
scrollToIndex={scrollToIndex}
scrollTop={scrollTop}
width={width}
/>
</div>
)}
</AutoSizer>
</div>
)}
</WindowScroller>
</div>
);
For whatever reason the example doesn't seem to work in my app. It does however work when I use an AutoSizer without the WindowScroller attached. Struggling to see the issue here.
I'm also having the same issue when trying to combine the WindowScroller, AutoSizer and List.
It might be worth noting that I get this error in the console:
(index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of WindowScroller which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node)
I tried wrapping the AutoSizer, then the List component with <div ref={registerChild}> - this removed the error but didn't fix the scroll problem.
I was struggling with the same issue a few days earlier. I also patterned my component to the WindowScroller, AutoSizer, and List example. What fixed it for me was assigning a ref to the parent container of the WindowScroller and using it as the scrollElement like so:
const containerRef = useRef()
return (
<div ref={containerRef}>
<WindowScroller scrollElement={containerRef.current}>
{() => { ... }}
</WindowScroller>
</div>
)
EDIT: I also didn't pass the onScroll={onChildScroll} prop to <List />
scrollElement={containerRef.current}
What versions are you using? I still can't get this to work using your example.