score:13

Accepted answer

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.

score:0

I have found another solution that works for me. I created an invisible element containing the length of data.

<div>
    <span style={{ display: 'none' }}>{yourData.length}</span>
    <List ... />
</div>

I was looking for a solution to update my chat history (socket.io) when someone writes a message. This was the best solution for me, because forceUpdate did not work and an additional prop renders all elements and this triggers an animation for each chat bubble in my code.


Related Query

More Query from same tag