Screen Refresh Issue in React Native - react-native

Question

I am making an app that uses firestore. Whenever a data changes in firestore my screen shows two set of data i.e. one set with data before change and other after the change.
for example if I have two data a,b and b is updated to c then the screen shows a,b a,c
After toggling between two screen, the screen gets refreshed and things become okay.
How to get the screen show only new set of data
Any help?
import React,{Component} from 'react';
import { View,ScrollView,AsyncStorage, StyleSheet, Dimensions, SafeAreaView,Platform,StatusBar,Text,Alert,Button,FlatList,TouchableOpacity} from 'react-native';
import {db} from "./FirebaseCon.js";
import firebase from "firebase";
import {useNavigation} from "#react-navigation/native";
import "firebase/firestore";
export default class NoticeList extends React.Component
{
constructor(props)
{
super(props);
this.state={Notice:[],myuser:"",setFlag:null};
}
componentDidMount()
{
let notice=[];
var d=new Date();
var pbm="";
const notref=db.collection("Notice");
async:notref.where("expiry",">=",new Date()).orderBy("expiry","desc").onSnapshot(querySnapshot=>
{
querySnapshot.forEach(doc=>
{
this.setState({Notice:notice});
notice.push(doc.data());
this.setState({Notice:notice});
}
)
});
}
render()
{
const getuser=async()=>
{
let uname=await AsyncStorage.getItem("username");
this.setState({myuser:uname});
this.setState({setFlag:true});
}
if(this.state.setFlag==null)
{
getuser();
}
let myusername=this.state.myuser;
return(
<ScrollView style={nstyles.scene} >
{
this.state.Notice.map(data=>{
const n1=data.expiry.toMillis()-86400000;
const o1=new Date();
const p1=new Date(n1);
let time=p1.getDate();
if(p1.getDate()==o1.getDate())
{
time="Today, ";
}
else
{
time="Yesterday, ";
}
time+=""+p1.getHours();
time+=":"+p1.getMinutes();
const formtmsg=data.message+"\n\n Published By : \n"+data.pby+"\n\n In Order Of :\n"+data.oby
if(data.pby!=myusername)
{
return(
<TouchableOpacity style={nstyles.notlist} onPress={()=>Alert.alert("Notice",formtmsg)}>
<Text style={nstyles.publisher}>{data.oby}<Text style={nstyles.ptime}>{"\n"+time}</Text></Text>
</TouchableOpacity>);
}
})
}
<Text style={{color:"grey",fontSize:16,alignSelf:"center"}}>Published By You</Text>
{
this.state.Notice.map(data=>{
const n=data.expiry.toMillis()-86400000;
const o=new Date();
const p=new Date(n);
let time=p.getDate();
if(p.getDate()==o.getDate())
{
time="Today, ";
}
else
{
time="Yesterday, ";
}
time+=""+p.getHours();
time+=":"+p.getMinutes();
const formtmsg=data.message+"\n\n Published By : \n"+data.pby+"\n\n In Order Of :\n"+data.oby
if(data.pby==myusername)
{
return(
<TouchableOpacity style={nstyles.notlist2} onPress={()=>Alert.alert("Notice",formtmsg)}>
<Text style={nstyles.publisher}>{data.oby}<Text style={nstyles.ptime}>{"\n"+time}</Text></Text>
</TouchableOpacity>);
}
})
}
</ScrollView>);
}
}

Answer 1

Divyansh Dixit, when dealing with lists React uses the key prop of the component in order to re-render the screen.
Your issue can be fixed by adding a unique key prop to the component returned by your map function, in your case the <TouchableOpacity>
It would look something like this
<TouchableOpacity key={data.id}>
...
</TouchableOpacity>
You can read more about this on https://reactjs.org/docs/lists-and-keys.html#gatsby-focus-wrapper