I am using React Virtualized to render a list with expandable panels. The issue is that when a panel expands, all 500+ rows inside it are loaded at once, making the UI very slow.

The outer list is virtualized, but I also want to virtualize the rows inside the expanded panel so only visible rows are rendered.

Wrapping the inner rows with List from react-virtualized, but it didn’t work as expected. I am facing issues with height calculations when trying to virtualize both levels. How can I efficiently virtualize the inner rows inside an expanded panel?

Here’s my CodeSandbox link showing the issue:

Reference

I am using React Virtualized to render a list with expandable panels. The issue is that when a panel expands, all 500+ rows inside it are loaded at once, making the UI very slow.

The outer list is virtualized, but I also want to virtualize the rows inside the expanded panel so only visible rows are rendered.

Wrapping the inner rows with List from react-virtualized, but it didn’t work as expected. I am facing issues with height calculations when trying to virtualize both levels. How can I efficiently virtualize the inner rows inside an expanded panel?

Here’s my CodeSandbox link showing the issue:

Reference

• javascript
• css
• reactjs
• react-virtualized

Share Improve this question Follow edited Mar 8 at 15:23 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Mar 8 at 13:41 Aman SadhwaniAman Sadhwani 3,56833 gold badges1919 silver badges2828 bronze badges 2

• 1 Do you need to see multiple panels at once? If yes, have three separate togglable lists. If not, have one list populated with the filtered entries of the selected category. – moonwave99 Commented Mar 8 at 15:15
• The panels are already separated; the question is how to virtualize the rows inside these panels. – Aman Sadhwani Commented Mar 8 at 15:22

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

When you don't set a fixed height for the inner container, the virtualization engine can't determine which rows are visible, rendering every row in the expanded section. By wrapping the inner list in a container with a specific height (say 300px), you let React Virtualized know how much space it has to work with. Then, using an AutoSizer, it calculates the available width and height, and the List component only renders the rows that fit within that space.

Maybe like this :

{expanded && (
  <div style={{ height: 300 }}>
    <AutoSizer>
      {({ height, width }) => (
        <List
          width={width}
          height={height}
          rowCount={rows.length}
          rowHeight={50}
          rowRenderer={innerRowRenderer}
        />
      )}
    </AutoSizer>
  </div>
)}