Как уменьшить число перерендеров компонентов в react?

Question

[Магомедов Магомед]

Есть массив новостей в количестве 5 штук который находится в redux store, он выводится на странице с помощью реакта, по клику на кнопку добавить еще мы делаем запрос на сервер что получить еще пять новостей с помощью concat мы объединяем старый массив с новым который пришел в качестве ответа от сервера, почему когда я делаю запрос данные перерисовываются несколько раз, первый раз когда я кликаю на кнопу "Подгрузить еще" у меня происходить рендер текущего массива, плюс после того когда приходят данные от сервака опять рендерятся все объекты, shouldComponentUpdate не помог, PureComponent немного улучшил ситуацию, вопрос как сделать так чтобы когда я делаю запрос рендерились только те новости которые пришли в ответ от сервера

Comments

[Магомедов Магомед]

в реакт девтулс удобная фигня есть которая подсвечивает компоненты которые изменяются + в консоле вывел

Answer 1

[Антон Спирин]

Способы позволяющие избавиться от ненужных перерисовок:
1. В классовом компоненте можно реализовать метод shouldComponentUpdate
2. Можно использовать PureComponent
3. Можно обернуть компонент в вызов connect
4. Функциональный компонент можно обернуть в вызов React.memo

Comments

[Магомедов Магомед]

Я пытался в shouldComponentUpdate сравнить id если они разные разрешить рендер если нет то запретить, не помогло может это совсем простое сравнение или я что не так делаю

[Антон Спирин]

Магомедов Магомед, вы в списках используете свойство key? Передаете туда уникальное значение? А данные как подгружаете? Смешиваете старые сущности с полученными с сервера в новом массиве?

[Магомедов Магомед]

Key использую, передаю туда id, данные извлекаю redux-axios-middleware, массивы я обновляю методом concat тем самым не возвращаю новый массив, не мутируя старый, плюс еще объект ошибки и некоторые свойства, но они также заменяются на новые свойства через

{...state, ...payload, data: {news: state.data.news.concat(payload.data.news)}}

что то вроде этого

[Антон Спирин]

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

[Магомедов Магомед]

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

[Антон Спирин]

Магомедов Магомед, ну код всех родительских компонентов покажите что ли

[Магомедов Магомед]

Спасибо за ответы, получилось исправить ситуацию, получилось так что я в redux контейнере получал свойства из стора которые обновлялись и тем самым вызывали перерендер всех дочерних компонентов, пришлось подправить некоторые вызовы функций в обработчиках на компонентах, теперь все норм, еще раз спасибо