Многие разработчики уверены, что для построения потоковых графиков в React обязательно нужны тяжеловесные комбайны. Посмотрим, что скрывается под капотом библиотеки Liveline, которая обещает плавность без лишних абстракций. Компонент отрисовывает данные на единственном элементе <canvas> с заявленной частотой 60 кадров в секунду. Из зависимостей требуется только сам React 18. Главная задача инструмента — принимать новые значения и перерисовывать линию без рывков.

Набор встроенных функций выглядит несколько избыточно для заявленного минимализма. Здесь соседствуют японские свечи, стриминг стакана заявок, окна времени и специфичный degen-режим с частицами и тряской экрана. Правда, весь этот функционал по умолчанию отключен. Сглаживание реализовано через базовый алгоритм линейной интерполяции, который подтягивает график к новому значению на 8% за каждый кадр. Это действительно удачно маскирует проблемы при рваном соединении, когда данные сыплются неравномерными пакетами.

Вопрос в том, готовы ли вы мириться с техническими компромиссами. Отрисовка на холсте означает потерю нативной доступности и невозможность точечной стилизации элементов через стандартный CSS. К тому же, жесткая привязка к последней мажорной версии React отсекает часть существующих проектов. Для красивого биржевого тикера или вывода метрик загрузки процессора Liveline подойдет отлично. Но при попытке собрать сложный аналитический дашборд вы быстро упретесь в ограничения одного <canvas>.