react-virtualized: Problems with scrolling

I am trying to use List, something like this

<AutoSizer>
  {({ height, width }) => (
    <List
      width={width}
      height={height}
      rowHeight={48}
      rowRenderer={({ index }) => (
        <div style={{ height: 48 }} key={index}>Item {index}</div>
      )}
      rowCount={rows.size}
    />
  )}
</AutoSizer>

But instead of smoothly scrolling I get terribly jerky on chrome 61.0.3163.100 https://www.screencast.com/t/I7yRYcu71 on FF 55.0.3 I had empty space at the end https://www.screencast.com/t/JOT1Bswz

Without AutoSizer the problem doesn’t disappear. I’m using the latest versions of react and react-virtualized.

What am I doing wrong? Who faced such a problem?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 24 (1 by maintainers)

Most upvoted comments

@yuristrelets That’s because you should pass style and key (not index) props to your div. rowHeight should be set via component props.

      rowRenderer={({ style, key, index }) => (
        <div style={style} key={key}>Item {index}</div>
      )}

+44

TrySound on Sep 26, 2017

In case anyone is having this issue, passing the style down to whatever actual div is rendered for the row is what fixed this for me.

I had originally passed down the style property to the row component, but I didn’t use that property anywhere in the row. I then passed it down to the base row component which passed the style to the actual div creating the row.

Hope this helps anyone else.

LiranCohen on Dec 5, 2020

Guys here is the fix https://github.com/bvaughn/react-virtualized/pull/825

istarkov on Sep 27, 2017

still reproducing

gewalttat on Jan 26, 2023

I have the same issue as @yuristrelets. react-virtualized@9.21.1 on Chrome 75.0.3770.100. Any news? Taking into account last 3 unresponded comments.

jaxxreal on Jul 4, 2019

facing the same issue, using “react-virtualized”: “^9.22.3”.

noumanaltaf on May 19, 2022

@TrySound You’re right! My fault, I didn’t see that it’s necessary to pass style ad key. Downgrading to version 9.9.0 and changing rowRenderer solved the problem. Thank you!

yuristrelets on Sep 26, 2017