gikami
@gikami
web программист

Как правильно оптимизировать списки с компонентами и данными из redux с помощью useMemo?

Вопрос возник уже давно, в сети сложно найти что либо конкретное.
Интересует вопрос как оптимизировать список изображений плиткой 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]);

Понимаю что решение такое себе, опыта не хватает на более хорошую реализацию. Был бы очень благодарен за помощь.
  • Вопрос задан
  • 27 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы