Я создал мобильное приложение. В нем есть список карточек, которые в себе содержат список товаров. Первоначально товары содержат неполную информацию. У нас будет один reducer - cards. В нем первоначальный state будет таким:
state = {};
Когда мы заходим в мобильное приложение, мы стягиваем карточки с товарами, после этого наш state преобразуется в:
state = {
flowers: [
{
id: 1,
name: "Rose"
},
{
id: 2,
name: "Cactus"
}
],
…
}
Когда я нажимаю на какой нибудь товар, например “Rose”, то я получаю из ответа API дополнительную информацию об этом товаре. Теперь наш state выглядит так:
state = {
flowers: [
{
id: 1,
name: "Rose",
color: "red"
},
{
id: 2,
name: "Cactus",
}
],
…
}
После того, как я записал его в state нашего reducer, у нас происходит re-render скрина где расположены эти карточки.
Проблема:
Когда я изменяю всего лишь один товар в определенной карточке, то у меня происходит re-render всех карточек и всех товаров, хотя изменился только один товар в одной карточке. Когда к нам приходит в reducer триггер на изменение state, то я возвращаю новый state как { …state, … payload }. В payload я передаю:
flowers: [
{
id: 1,
name: "Rose",
color: "red"
},
{
id: 2,
name: "Cactus",
}
],
Наши данные меняются, поэтому у нас и происходит re-render FlatList.
Карточки расположены в FlatList с вертикальной ориентацией. Товары расположены в FlatList с горизонтальной ориентацией.
Вопрос:
Я понимаю, что, чтобы у нас изменился FlatList, нужно передать в него новые данные. Но можно ли как нибудь избежать re-render всех карточек и всех товаров, которые не изменились. Ведь если будет их будет много, то это вызовет сильное проседание по FPS.
