FlatList items rerendering when saving the page

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