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

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

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

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