Вопрос возник уже давно, в сети сложно найти что либо конкретное.
Интересует вопрос как оптимизировать список изображений плиткой 3 в рят с выбором и добавлением информации в redux. Внутри изображения есть доп комопнент с галочкой при выборе.
Сделал через useMemo + useState, но возникла проблема, массив хранится в redux и при добавлении или удалении элементов при нажатии на изображение приходится слушать и обновление массива при рендере, а это тормозит очень сильно рендер.
Чтобы вы посоветовали, какой подходит использовать в данном случае?
Возможно не нужно делать через redux? По крайне мере рендер. Но тогда логика подсчета выбранных эдементов ломается.
Вот код:
<FlatList
data={photos}
extraData={photos}
maxToRenderPerBatch={15}
initialNumToRender={40}
removeClippedSubviews={true}
keyExtractor={(item: { id: number; }) => item.id}
numColumns={3}
renderItem={({ item }: any) => <ItemMedia item={item} />}
/>
Функция при добавлении или удалении в массив
const media = useSelector((state: any) => state.media);
const [selected, setSelected] = useState(media.findIndex((newItem: any) => newItem.id === item.id));
const selectItem = () => {
let select = media.findIndex((newItem: any) => newItem.id === file.id)
let newData = [...media]
if (select !== -1) {
newData = media.filter((newItem: any) => newItem.id !== file.id)
} else {
newData.push(file)
}
dispatch(selectedMedia(newData))
}
И сам элемент renderItem
const ItemView = useMemo(() => {
return <View key={item.id}>
<TouchableOpacity activeOpacity={0.8} onPress={() => selectFile(item)}>
<Image
source={{ uri: item.uri }}
/>
<View>
<Text>{selected ?? null}</Text>
</View>
</TouchableOpacity>
</View>
}, [selected, media]);
Понимаю что решение такое себе, опыта не хватает на более хорошую реализацию. Был бы очень благодарен за помощь.