Рендер только новых элементов при добавлении их в массив?

Question

[Ярослав Дмитриев]

При реализации инфинити скролла, с сервера подгружаются новые товары, и вопрос в том, как отменить ререндер тех компонентов, которые уже были в массиве, и рендерить только новые добавленные элементы
Дело в том что если из массива отрисовываются простые компоненты, то это не трудно и быстро, но если рисуются карточки товара которых уже 300 штук и при добавлении новых 20 в массив перерисовываются ещё и старые 300.
Песочница для примера https://codesandbox.io/s/sad-khayyam-lskxj?file=/s...

Comments

[Сергей Сергей]

Что за нелепица? Реакт ведь позиционировался как умеющий такое "из коробки".

[Ярослав Дмитриев]

Сергей Сергей, там не совсем про этот случай, либо я чего-то не знаю

[Сергей Сергей]

Что-то про виртуальное дерево было, что идёт сравнение данных по ссылке, что перерисовка только для изменённых ссылок. Весь массив за одну ссылку берётся что ли? Не просматривает массив на сохранённые ссылки?

[Aetae]

Сергей Сергей, если ты создал кусок JSX отдельно а потом переиспользуешь - то да, какбэ объект один - ссылка одна. А если ты создаёшь JSX в процессе рендера(т.е. примерно всегда) - новый JSX !== старому JSX и вот тебе перерисовки. Там сеть оптимизации которые касаются конкретно работы с DOM, но с самими компонентами придётся всегда всё держать в голове и шаманить вручную: всякие memo, shouldComponentUpdate(причём зачастую с кастомними функциями) итд.
Кто реально умеет это делать из коробки - это Vue, но там свои нюансы.

[Сергей Сергей]

оффтоп чистой воды

Aetae, то есть, примерно всегда эта библиотека вызывает боль, сопоставимую со строковой заменой?

[Aetae]

Сергей Сергей, я в комментах к ответу 0xD34F чуть пояснил.
Но по сути да, боль. После чистого js со всякими jquery - это конечно прогресс, но вот после того же Vue, когда привык, что либа думает за тебя(и хорошо это делает), переходить на React, где уже ты должен думать за неё - это действительно вызывает страдания.)

Answer 1

[Егор Живагин]

Вы же слышали про shouldComponentUpdate ?) Просто добавьте его к вашим item-компонентам
Или React.memo для функциональных компонентов

Но вообще, если у вас компоненты в цикле выводятся, а не просто div-блоки, то при тех же пропсах ререндера не будет. Просто это не в map нужно в консоли проверять, а внутри самого компонента-item. map в любом случае обязан перебрать все элементы

Answer 2

[0xD34F]

key={elem * Math.random()}

при добавлении новых 20 в массив перерисовываются ещё и старые 300

нет слов

Comments

[Ярослав Дмитриев]

Во-первых это в песочнице, на проекте в key передается id карточки
Во-вторых, ну вот убрал я Math.random() как рисовал он заново компоненты с таким же ключем так и рисует https://skr.sh/s92cgQoKLeC

[0xD34F]

Ярослав Дмитриев,

Во-первых это в песочнице, на проекте в key передается id карточки

Вот это правильно - враньё при описании проблемы гарантирует максимально быстрое получение наиточнейшего ответа.

Во-вторых, ну вот убрал я Math.random() как рисовал он заново компоненты с таким же ключем так и рисует https://skr.sh/s92cgQoKLeC

А, так вы ждёте, что при обработке массива через map некоторые из элементов каким-то волшебным образом будут пропущены. Умываю руки.

[Ярослав Дмитриев]

0xD34F, ваши комментарии крайне полезны, спасибо за потраченные ресурсы нажатия клавиш клавиатуре

[Александр]

Ярослав Дмитриев, https://codesandbox.io/s/qna-q1019064-mhq7j

[Aetae]

Александр, а теперь положи туда children'ом не {index}, а, допустим, <b>{index}</b>.
Да, memo из коробки именно настолько бесполезен. ~React~.

[Александр]

Aetae, знаете решение лучше - вперед.

[Aetae]

Александр, а его нету, этого вашего решения! *жизнерадостный смех*
For React, it is.

Точнее в каждом конкретном случае оно своё - надо напрягать мозги и держать в голове механизмы реакта. Например в случае с <b> - вынести в ещё один memo-компоннет, куда передавать чистый index.

Или забить.
Вся философия реакта сводится к идее: забей болт на оптимизацию пока не лагает, когда залагает - оптимизируй узкое место.
Проблема только в том что с таким подходом тормоза накапливаются постепенно и в один прекрасный момент всё начинает тормозить без конкретно локализуемой причины. На том обычно и сказке конец.