Non-stop re-rendering

[maynir]

I'm having a non-stop re-rendering.
In this simple example, I'm just rendering div containing "X".
I gave it the right height and width, tried to remove every possible CSS and I just can't get it.

Elements:

Screen:

my code:

<div>
        <List
                height={200}
                itemCount={this.state.filteredValues.length}
                itemSize={17}
                width={682}
                overscanCount={10}
            >
                {({ index, style }) => (
                    <div> X </div>
                )}
            </List>
    </div>

[bvaughn]

I gave it the right height and width, tried to remove every possible CSS and I just can't get it.

Not sure what you mean by this, but your example doesn't seem to be using the style parameter passed to it which would cause a problem. The style parameter is what positions and sizes the elements in your list.

Also, what do you mean by "nonstop rendering" ? In the code example you provide above, you configure the list to be 200 pixels tall and tell it that items are 17 pixels tall, and that you want it to pre-render ("overscan") 10 additional items. This means that it will render ~22 items. (As a side note, I would advise against an overscan value that high. Probably 1-3 is best.)

[bvaughn]

I'm going to close this issue since it isn't really actionable. We can chat more here if there are follow up questions though.

[maynir]

Hi Brian, I added the style option and that solved the problem. I would like to know if there is an option for rendering when there is no results? (like you have in react virtualized) Thank you.

…

On Mon, Aug 13, 2018 at 6:28 PM Brian Vaughn ***@***.***> wrote: Closed #41 <#41>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#41 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AiCJbFhau_HA7fhKzfkb6c53ucm5bdsCks5uQZsigaJpZM4V6t0m> .

[bvaughn]

No, nothing built into react-window. I think the easiest thing to do is to just return a different component, e.g.

if (numItems === 0) {
  return <NoResultsView />;
} else {
  return <FixedSizeList />;
}