ПостКейсы оптимизации React

Кейсы оптимизации React Обзор примеров, показывающих, как пять разных команд разработчиков оптимизировали React. Например, у одной из команд на проекте был плохой показатель метрики INP, которая отслеживает скорость отклика сайта. Хорошим считается отклик менее 200мс, на проекте был отклик 380мс. Какие были найдены причины: - Большой бандл. Первоначально грузился большой бандл с кодом, который не был нужен. Помог code splitting. - Определенные колбеки у обработчиков событий вызывались слишком часто, из-за чего блокировался основной поток браузера. Помог debounce на скролл и resize, а также делегирование событий. - Ре-рендерелись больше компонентов чем нужно при изменении стейта. Помогло оборачивание компонентов в React.memo() и использование useMemo для дорогих вычислений. - Долгий рендеринг компонентов. Помогло обновление до React 18. Основным преимуществом этого обновления стал параллельный рендеринг, поскольку высокоприоритетные задачи, такие как пользовательский клик, могут прерывать рендеринг. Это обновление улучшило метрику INP на 46% на десктопе. Помимо это помогли следующие исправления для улучшения производительности рендеринга: - Разбиение сложных хуков на более мелкие. На графике перфоманса было видно, что сложные хуки вызываются несколько раз и перерисовывают компонент без необходимости. - Замена React Router на window.location там, где это возможно. - Улучшение мемоизации Redux селекторов. https://largeapps.dev/case-studies/advanced/