react-virtualized list item does not re-render with changed props until I scroll

Question

I have a react-virtualized list (using List component) like this:

renderItem = ({ index, key, style }) => {
  const {
    entries,
    projectId,
  } = this.props;
  const entry = entries[index];

  return (
    <div key={key} style={style}>
      <MyItem
        entry={entry}
        entryIndex={index}
        projectId={projectId}
      />
    </div>
  );
}

<List
  rowHeight={75}
  rowRenderer={this.renderItem}
  rowCount={entries.length}
  width={780}
  height={1000}
/>

MyItem is connected to a redux store and can be interacted with. However it's not reflecting any of the changes on the screen until I scroll the list, as soon as I scroll I see the list item as it should be with the updates since MyItem's render() is finally called.

How can I get react-virtualized to re-render the list item when a prop changes?

score 15 · Accepted Answer · edited May 22 '20 at 12:35

15

I am pretty sure that you can simply pass the props in question to your list. It would look something like this.

<List
  rowHeight={75}
  rowRenderer={this.renderItem}
  rowCount={entries.length}
  width={780}
  height={1000}
  data={entries} // this prop can be called anything
/>

Of course the List does not actually have a prop called data, but passing your dataset as a prop will tell the List to re-render when the data changes.

Under the hood, List and other components make use of PureComponent, which will trigger re-render any time the props you pass to them change. You can read more on this here.

NOTE: I have not actually ever done this with the list component, but have made this work with the MultiGrid component. In my use case, I allowed the user to sort the data, and the dataset needed to be passed to the MultiGrid so that it would re-render when the data changed.

Hope this helps.

edited May 22 '20 at 12:35

Rachid O

13,013
15
66
92

answered Oct 11 '18 at 22:36

Chaim Friedman

6,124
4
33
61

I didn't find this solution in the document of react-virtualized, but it works. Thanks! – 0xh8h Jan 08 '19 at 09:53
Yes this works !!! .. you just need to pass an additional property which is unique for next time so that List component find the new changes in shallowCompare and get recall the given re-render method. – Hitesh Jangid Sep 18 '20 at 07:43
data={Math.random()} is generic solution. – Tejas Oct 14 '21 at 12:51
1

Thanks! I was stuck with the same problem. this solution helped me – krishnanspace Feb 03 '22 at 13:42

react-virtualized list item does not re-render with changed props until I scroll

1 Answers1