FlatList items rerendering when saving the page - reactjs

Question

Issue is when i am saving the page, the already rendered items are rerendering again, showing the error " Warning: Encountered two children with the same key, AhO8HUMnDjAH1Mh8u2jM. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version."
Here is my code
PLs note I have used pagination, and infinite scroll list methods.
import React,{useState,useEffect} from 'react';
import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, Button } from 'react-native';
import firestore from '#react-native-firebase/firestore';
import { Icon } from "react-native-vector-icons/Ionicons";
const HomeScreen = ({navigation}) => {
const [sessions,setSessions] = useState(new Array());
const [sessionsPerLoad] = useState(12)
const [startAfter,setStartAfter] = useState(Object)
const [lastPost,setLastPost] = useState(false)
//read docs
const getSessions = async (sessionsPerLoad) => {
const sessionArray = [];
const querySnap = await firestore()
.collection('sessions')
.orderBy('createdAt', 'desc')
.limit(sessionsPerLoad)
.get()
const lastVisible = querySnap.docs[querySnap.docs.length - 1]
querySnap.forEach((doc)=> {
let sessionData = doc.data()
sessionData.sessionID = doc.id
sessionArray.push(sessionData)
})
return {sessionArray, lastVisible}
}
const getMoreSessions = async (startAfter,sessionsPerLoad) => {
const sessionArray = [];
const querySnap = await firestore()
.collection('sessions')
.orderBy('createdAt', 'desc')
.startAfter(startAfter)
.limit(sessionsPerLoad)
.get()
const lastVisible = querySnap.docs[querySnap.docs.length - 1]
querySnap.forEach((doc)=> {
let sessionData = doc.data()
sessionData.sessionID = doc.id
sessionArray.push(sessionData)
})
return {sessionArray, lastVisible}
}
useEffect(()=>{
getSession()
},[])
const getSession = async () => {
const sessionsData = await getSessions(sessionsPerLoad)
setSessions([...sessions, ...sessionsData.sessionArray])
// console.log('Sessions',sessions)
setStartAfter(sessionsData.lastVisible)
// console.log('Last VIsible',sessionsData.lastVisible)
}
const getMoreSession = async () => {
if(!lastPost){
const sessionsData = await getMoreSessions(startAfter,sessionsPerLoad)
setSessions([...sessions, ...sessionsData.sessionArray])
// console.log('More Session',sessions)
setStartAfter(sessionsData.lastVisible)
sessionsData.sessionArray.length==0 ? setLastPost(true):setLastPost(false)
}
}
const RenderCard = ({item})=>{
return(
<TouchableOpacity onPress={()=>{navigation.navigate('HomeScreen2', {item})}}>
<View style={{padding: 10}}>
<Text>Title= {item.title}</Text>
<Text>Description= {item.description}</Text>
</View>
</TouchableOpacity>
)
}
return(
<View>
<FlatList
data={sessions}
renderItem={({item})=><RenderCard item={item} />}
keyExtractor={(item)=>item.sessionID}
onEndReached={getMoreSession}
onEndReachedThreshold={0.01}
scrollEventThrottle={150}
ListFooterComponent={()=>
!lastPost && <ActivityIndicator />}
/>
</View>
);
};
const styles = StyleSheet.create({
});
export default HomeScreen

Answer 1

Pls ignore this issue, in the development phase, this will happen.
To ignore these warnings use -> https://stackoverflow.com/a/67670955/13733008