-1

I have a Flat list like this:

    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item}
    />

The data is just array of unique strings that represent keys to other object.
The array looks like this : ["id1","id2","id3",...]

Inside every Item of FlatList is Image that blicks on rerender... I have another there that is memoized but I have not figured out how to do it with image that has pinch to zoom animation

The problem is I cant figure out how to prevent rerendering the whole FlatList when I add item to data array.

I do not know if I can use useMemo since I do some animations with the item and I do not not if memoizing will broke them.
And I dont even know what should I use as a dependency

This is my renderItem function

const renderItem = ({ item }) => {
    return <Card itemId={item} />;
 };
Tabonx
  • 59
  • 7
  • 2
    Does this answer your question? [What does useCallback/useMemo do in React?](https://stackoverflow.com/questions/53159301/what-does-usecallback-usememo-do-in-react) – darren z Aug 18 '22 at 16:36

1 Answers1

0

I do not know if there is better way but i could not make useMemo or useCallback to work, but i found that memo from React is working just fine for me...
I wrapped my component in memo and the flickering effect stopped

import React, {memo} from 'react'
...
export default memo(Item);
Tabonx
  • 59
  • 7