FrontendConf

Как механизм приоритетов в React приводит к «разрывам» интерфейса и как с этим бороться

Производительность

Фронтенд / другое
React, Vue, Angular и другие JavaScript-фреймворки
Производительность и мониторинг фронтенда
Реактивное программирование

Доклад принят в программу конференции

Целевая аудитория

Middle-senior frontend разработчики, которые работают с react

Тезисы

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

Оказалось, дело в приоритизации обновлений в React: он может отбрасывать низкоприоритетные изменения, что приводит к tearing (разрывам интерфейса).

В докладе проведу разбор реального кейса: обсудим работу React под капотом и рассмотрим, как устроены lanes и concurrent rendering.

Senior frontend разработчик. В настоящее время работает над корпоративным чатом в Точке. Имеет единственное хобби - программирование.
В свободное время играет в волейбол.

Видео

Мнение Программного комитета о докладе

Фото куратора

Алексей Авдеев

Интерфейс на React живет своей жизнью? Компоненты получают старые данные или перестают рендериться? На реальном кейсе разберем, как приоритизация обновлений в React приводит к «разрывам» (tearing) и как вернуть контроль над рендерингом.