react-native flatlist images flicker when list state updating

Question

I have populated a FlatList with data fetched from Google's firebase backend. The implementation is rather standard, here's a stripped down version:

export default class Day extends Component {

state = { data : [], today: false }


componentWillMount = async () => {

    const { today } = this.state;
    const { calendarDb } = this.props

    await calendarDb.onNewAgenda({ 
          day : today
        , then: this.parseOnListed 
    })
}

parseOnListed = blob => {

    const { data } = this.state;
    data.push(blob)
    this.setState({ data: data })
}


renderItem = ({ item }) => 
    <Hour data = {item}/>


render = () => 
    <FlatList  
        data         = {this.state.data}
        renderItem   = {this.renderItem}
        keyExtractor = {item => item.ID}
    />

}

The issue is that every time a new blob is pushed into data, the <Image/> component in <Hour data={item}/> flickers. This makes the list a no-go in terms of user experience. What gives? <Hour/> is standard as well, and more or less look like this:

const Hour = ({ data }) => 
   <View>
       <Image source={{uri:data.uri}}/>
       <Text> {data.name} </Text>
   </View>

The content of <Text> does not flicker, only the image from <Image .../>

Answer 1

Check whether keyExtractor is getting unique ID or not. The flat list is re-rendering on state update and images are downloaded again. Because, each row is not uniquely identified as said in comments by @Guruparan Giritharan.