"Trying to remove non-present child list" error occurred with specific use-case

[YangJonghun]

Description

Trying to remove non-present child list error occurred with specific case
(please check below reproduce or example)

Version

0.71.0

Output of npx react-native info

It doesn't related with dev environment. it is JS issue
this problem occurred within react-native/Libraries/Lists/ChildListCollection.js

Steps to reproduce

1. use FlatList(A) as ListEmptyComponent within other FlatList(B, with empty data)
2. inject data within FlatList(B) after ListEmptyComponent mounted

Snack, code example, screenshot, or link to a repository

just render below component

const ErrorComponent = () => {
  const [data, setData] = useState<number[]>([])

  useEffect(() => {
    setTimeout(() => {
      setData([1, 2, 3, 4, 5])
    }, 2000)
  }, [])

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <FlatList
        data={data}
        renderItem={({ item }) => <Text>{item}</Text>}
        ListEmptyComponent={
          <FlatList data={['empty']} renderItem={({ item }) => <Text>{item}</Text>} />
        }
      />
    </View>
  )
}

[YangJonghun]

@NickGerleman
Hi Nick,
this issue may occurred with below commit
010da67
if you have enough time, please check this issue. thanks😀

[NickGerleman]

It looks like, unlike cells rendered by data, ListHeaderComponent, and ListFooterComponent, ListEmptyComponent is rendered without a CellContextProvider providing a cellKey.

This means the logic for registering/unregistering nested children does not work correctly when a VirtualizedList is present as part of ListEmptyComponent, and the new logic treats the inability to locate the registered list as an invariant violation.

There should be a relatively straightforward fix, but in the meantime a simple workaround would be to avoid nesting a FlatList as part of the ListEmptyComponent.

[Pavi-t2s]

@YangJonghun Any fix for this error?
I'm also getting same error when i use nested Flatlist in rn 71.11

[YangJonghun]

@Pavi-t2s
Unfortunately I haven't tried it with version 71.11
However, it worked fine in version 71.8

[elencho]

same issue on 71.8

[satyabrata-dash5]

Same issue on "react-native": "0.71.0",

[sarthakpranesh]

I encountered a similar issue on RN v0.73.0 after upgrading from v0.70.12.

Our RCA was on v0.70.12 if we returned undefined value from keyExtractor for any child FlatList being rendered as item then when the items in Parent FlatList get destroyed/removed/cleaned nothing would break and FlatList will somehow manage it internally. But doing same on v0.73.0 would crash the app with Trying to remove non-present child list

So this was causing the crash on v0.73.0

const keyExtractorId = (item: any) => item?.id;

where id is undefined for a child FlatList and changing this to below fixed it

const keyExtractorId = (item: any) => `${item?.id}`;

Also got those missing IDs added.