All items are rendered at once

[elisei-timofte]

It should render only a page or two. In may case all my items gets rendered in chunks from the first rendering.

this is the viewport. only 7 items are visible. If you look at the scroll, you'll see that all the items are present.

        <ReactList
            type          = {'simple'}
            threshold     = {300}
            pageSize      = {20}
            length        = {items.length}
            itemRenderer  = { (index, key) => items[index] }
            itemsRenderer = { (items, ref) =>  <MyComponent myRef={ref} items={items} /> }
          />

[niedzielski]

This confused me too but I think it's a duplicate of #29. If you look at the third example here, you can see node recycling in action.

[remimarsal]

I'm having this exact same issue and I don't think it is the expected behavior. My understanding is that the simple type is used for incremental rendering used in combination of length, pageSize and threshold properties while scrolling down.

Recycling is indeed nice to have performance-wise but that's another topic. Rendering the whole list on simple type on first render simply defeats the purpose of using ReactList vs a simple map(). I believe something is unclear in the documentation.

[remimarsal]

In my case it actually works as intended when the list is not initially hidden or on second render if the list was hidden.

It seems the height is not properly calculated at first and it continuously triggers the threshold. This might have to do with CSS in JS.

EDIT: For those having the same issue as mine, a quick hack is to initially render the list container and hiding it right after componentDidMount. It's invisible and it forces the related CSS in JS to be parsed and ReactList simple works as expected. On a side note I think this issue should only arise in Dev environment where the CSS is not precompiled. But I need it to work in Dev mode first!

[jmeyers91]

Just ran into this issue (all 1000+ items rendering at once in variable mode). The solution for me was my container didn't have a height specified. Once I added a max-height, the items rendered correctly.