React-Native update UI when value on element in array changes, without using ForceUpdate - user-interface

Question

Imagine this: I have a FlatList presenting a list of message threads. Each cell has a label showing number of new messages in that thread. Each cell also shows a truncated string of the latest message in that thread. Other things are presented too. The list of threads is kept in redux and is set as the data prop for my FlatList. The class instances for the threads do not know of the FlatList and cannot force reload on it when something changes, eg a new message comes in (intentional design). The issue now is that the FlatList does not update when such an event occurs. It only updates when a new thread array is set (new instance).
How can I get the FlatList to update when any of the values in the threads changes?
A timed recurring reload is not preferred. I was thinking to have the threads update (by increasing) a value in redux called MessageThreadUpdateCount which would be a number. That would be done each time any UI connected value changes. The FlatList then uses that redux value as its ExtraData prop. Hence updating when that changes. Using a boolean instead of a number would be raise the question: what should set it to false, and when? Any other suggestions?

Answer 1

For the list to update you need to set the 'extraData' prop of the FlatList component,
This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.
exemple
<FlatList
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
With your state being change when you receive a new message. Note that you can replace 'this.state' by any variable updated when you get a new Message could be a counter for example.
(source: https://facebook.github.io/react-native/docs/flatlist.html)
Hope this will help you.