import React from "react";
import { FlatList, Text } from "react-native";

export default function ChatsList() {
  return (
    <FlatList
      contentContainerStyle={{ padding: 20, paddingTop: 50 }}
      // data={[0]}
      data={[{ id: 999 }, {}, { id: 1 }]}
      renderItem={({ index }) => (
        // <Text key={index}>{`bamboozled ${index}n`}</Text>
        <Text key={index}>{`placeholder ${index}n`}</Text>
      )}
      keyExtractor={(_item, index) => index.toString()}
    />
  );
}

I am dumbfounded. Here I have a list of 3 objects. The object at index 1 is empty. If there is another object after that with an id property of value 1, I get a warning,

Encountered two children with the same key, 1…
… even though there is no duplicate.

If I comment that data out and switch to the data that’s just a list with 1 entry, the warning disappears but the item at index 1 from the previous data remains, even preserving the previous renderItem logic (as demonstrated in the video).

If I repeatedly do this, I keep getting “ghost” entries that accumulates at the top of the FlatList.

Using a keyExtractor as shown prevents this, and toggling it on and off using comments produces the same duplication behaviour as described previously.

What the hell is going on? Is this intended behaviour? A glitch? Should I report it?