Почему проистодит re-render левого списка (react-redux)?

Question

[­]

я совсем недавно в сфере программирования в целом, поэтому если этот вопрос покажется кому-то глупым, или тупым, прошу меня понять и простить.

к делу.
есть вот такое простое react приложение:

ссылка на код и изображение

github

цель такая:
при нажатии на карту в левом списке, она клонируется в правый список.

вот так

state выглядит таким образом:

redux state

есть data - это объект {}, содержащий в себе полный список карт.
есть cards - это массив [], содержащий id карт, которые выводятся в левом списке.
есть deck - это массив [], в который добавляются id карт, которые надо вывести в правом списке.

и дерьмо в том, что при нажатии на карту в левом списке, ре-рендерятся лишние компоненты:

это видно с помощью highlight updates

то есть, обновляется только правый список (в него вносятся id карт), но re-render происходит и всех остальных компонентов.
почему заного рендерился левый список, если он никак не изменяется?

даже в diff видно что изменяется только массив deck:

diff

p.s. где-то слышал, что компонент который подключен через connect, по дефолту становится pure компонентом, и не обновляется если к нему не приходит обновленное значение. но у меня это почему-то не работает.

// --------------------

помогло вот что:

удалил папку node_modules, которая шла по дефолту вместе с create-react-app, и прописал npm install.
и всё стало как надо

Answer 1

[forspamonly2]

карточки в левом списке у вас перерисовываются потому, что каждая из них присоединена к редуксовскому хранилищу. точнее, перерисовываются редуксовские обёртки, которые Context.Consumer - вы их наверняка видели в реактовских девтулзах.

сам компонент действительно по умолчанию pure, но это работает как: редуксовская обёртка ловит изменение хранилища, получает новый store, вызывает ваш mapStateToProps и перерисовывает обёрнутый компонент с новыми props. а уже после этого отрабатывает shouldComponentUpdate от внутреннего PureComponent, понимает что ничего не поменялось и сам обёрнутый компонент уже не перерисовывается.

глобально, вам стоит сделать карточку тупым (презентационным) функциональным компонентом - принимать в нём на отрисовку готовый объект данных карточки, а получать и передавать его из connected компонента списка.

Comments

[­]

Дело в том, что я пытался делать карточку презентационным компонентом, который не ведает о состоянии стора, а просто принимает в себя пропсы от контейнера списка.
В таком случае карточки не мерцают, это да, но левый список всё равно продолжает делать ре-рендер.
Короче говоря, мне еще вникать и вникать

В любом случае, спасибо за ответ

[­]

Вот, пожалуйста.
Нашел пример shopping cart
Если открыть демо, то там видно что мерцает только тот компонент, который добавляется в корзину.
Запустил этот экзампл у себя, такой же результат:

img

Скопировал папку SCR к себе в проект, и что я вижу?

светиться всё что можно

[forspamonly2]

просто в том примере редукс прошлой версии. поставьте на пробу себе старый - у вас тоже перестанет моргать всё, кроме правого списка.

только не забудьте потом вернуть обратно, оно же не просто так моргает.

сравнительно недавно, в 16 реакте переделали работу контекстов. новый 6 реакт-редукс, в свою очередь, переделали для использования этих контекстов. старый редукс работал без них: сравнивал посчитанные пропсы внутри себя и вызывал forceUpdate обёрнутых компонентов напрямую. как работает новый - я описал выше.

то есть, старый редукс свою обёртку не перерисовывал, а новый теперь перерисовывает. но это не значит что старый работал лучше - просто он делал эту часть работы реакта самостоятельно и для реактовских девтулзов это не было заметно. и остальной реакт про это не знал и все уже проведённые редуксом сравнения пропсов проводил со своей стороны заново, тратя на это лишние ресурсы.

теперь редуксовсая самодеятельность убрана, реакт всё это делает однократно сам и девтулзы подсвечивают отработавшие редуксовские обёртки как положено. стало гораздо нагляднее видно, что редукс - это не магия, а каждый коннект - это не бесплатно.

[­]

forspamonly2, Спасибо за еще один ответ.
Но прочитав Ваше сообщение несколько раз, я так и не понял как теперь в обновлённом реакт-редаксе запретить re-render компонентов, пропс которых не меняется.
Пробовал PureComponent, но не помогает. shouldComponentUpdate не пробовал, но вроде как это тоже самое что и PureComponent. И еще, насколько мне известно, lifecycle методы можно использовать только в class компонентах. А если класс обычной константой, то как ему запретить ре-рендер?
Я уже неделю над этим вожусь, мой мозг начинает перегреваться. Хочется забросить всё это, но надо понять. Код сам себя не напишет.

[forspamonly2]

не надо вам ничего запрещать. ваш компонент и так не перерисовывается, это только обёртка редукса.

а она и должна, она ведь действительно работает в это время. собирает новые пропсы вашему компонету.

каждое изменение стора всегда вызывает срабатывание обёрток всех приконнекченных к нему редуксовских компонентов.

а уже ваши компоненты перерисовываются тогда, когда что-то в собранных обёртокой пропсах поменялось. потому что они pure.

не хотите чтобы лишние обёртки срабатывали - не цепляйте лишнего к редуксу. отдельные карточки в вашем случае (да и в том примере тоже) совсем не обязательно к редуксу цеплять, им достаточно данные пробросить снаружи.

[­]

forspamonly2, Всё, понял, спасибо большое! Как же Вы сильно помогли.

Только всё равно, легкая запутанность осталось. Если в рендер компонента прописать console.log(' render'), то оно отобразиться, хотя пропсы остались неизменными. Всё таки означает что компонент перерисовался?

Как теперь следить за оптимизацией приложения, если мерцают все компоненты подключенные к редаксу?

upd: вот заглянул в документацию react-redux, и там, как я понял, на примере туду показано, что каждая задача подключена к редаксу через connect.

[forspamonly2]

отработал метод render - это и есть "перерисовался". так что если метод вызвался, значит оно решило что пропсы разные.

почему они могут быть разными - другой вопрос. например, если колбэк передаётся как стрелочная функция, он каждый раз будет новым. у вас кажется так клик ловился, но сейчас проект недоступен, точно не скажу.