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?

Answer 1

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.