Как вы решаете проблемы производительности React/Redux?

Question

[sergealmazov]

Добрый день!

Столкнулся с проблемой - стало тормозить React/Redux-приложение. Начал разбираться. Кто-то советует shoudComponentUpdate доработать, кто-то не использовать arrow functions в render-методе.

У меня вопрос к сообществу. А как лично вы оптимизируете производительность вашего приложения? Что плохо использовать в React/Redux - архитектуре, а что, наоборот, хорошо?

Answer 1

[Максим]

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

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

Использование shouldComponentUpdate - один из самых распространенных и действенных способов.

По вопросу: стало тормозить React/Redux-приложение - добавляйте больше конкретики, будет видно. Все индивидуально, но обычно самые простые советы - использовать SCU, дробить на мелкие компоненты, дробить данные для редьюсеров (не хранить все в одном большом), использовать селекторы, минимизировать выполнение трудных расчетов (может у вас где-то банально "тяжелая" функция постоянно пересчитывает результат, а это не нужно)

p.s. неплохая статья на EN - https://medium.com/@alexandereardon/dragging-react...

Answer 2

[Артур Борденюк]

Большая статья про производительность React приложений. Много теории и много практики.

https://www.simform.com/react-performance/