React Native | Flatlist & memo | renderItem is not function

1.5k Views Asked by At

I have a list. There are 10 elements in it. I show this with flatlist. But when 1 of the 10 elements on the list changes, it renders 10 of them again. I was going to solve this problem with memo (flatlist has to do this by itself, but anyway) but I'm getting a syntax error. Err: renderItem is not function.

const Item = React.memo( ({item}) => (
   <Text>{item.name}</Text>
))

const List = () => {
  return (
     <FlatList
        ..
        renderItem = {Item}
     >
)}
export default React.memo(List);
2

There are 2 best solutions below

1
On

replace this

renderItem = {Item}

with

renderItem={({ item }) => <Item item={item} />}
4
On

But when 1 of the 10 elements on the list changes, it renders 10 of them again

I think you forgot to add Flatlist extraData prop. For more detail check this.