Мнение – SolidJS

За последний год удалось несколько раз пописать код в рамках пет-проектов на SolidJS (+ разбирали проект с менти), еще одном вечно перспективном фреймворке. Поделюсь своим мнением.

У солида хорошая документация и онбординг-туториал, которые знакомят с основами фреймворка. А примерно год назад вышел мета-фреймворк SolidStart, который берёт на себя сборку (на базе vinxi), роутер и работу с SSR (серверные экшены, дедупликация запросов, прелоадеры и т.д.).

Про солид часто говорят, что это реакт без костылей. Они и правда очень похожи, и если вы пишете на реакте, то легко поймёте код, написанный на солиде: тот же компонентный подход, JSX, похожие lifecycle-методы компонентов, контекст и инфраструктура сигналов, схожая с useState для работы с состоянием внутри компонентов.

Но конечно есть и большие отличия. Во-первых, у солида высокая производительность благодаря fine-grained reactivity (мелкозернистой реактивности). Компоненты рендерятся всего один раз, а все обновления происходят на уровне DOM-нод. Это дает сильный буст по производительности в отличие от реакта, где компоненты перерендериваются при изменении состояния, даже если нет изменений.

Во-вторых, вся система состояний построена на сигналах. Они не привязаны к UI (как тот же useState в реакте), и на их основе можно писать логику за пределами компонентов.

В-третьих, компоненты вместе с JSX компилируются в обычные функции и реальные DOM-ноды, а не в обертки в виде React.createElement (из-за чего например нет синтетических событий и все dom-события максимально близки к нативным).

Кстати, фича use из реакта 19 для получения данных из асинхронных источников, в SolidJS реализована уже давно в виде createResource и является целевым способом для работы с запросами.

В целом все это выглядит очень круто. Но вопрос – солид появился уже давно и до сих во всех опросах state of js у него ну очень маленькая доля использования. Почему? Давайте разберем проблемы:

1️⃣ Очень маленькая экосистема поддерживаемых библиотек. В целом порты с реакта есть много для чего, но большая часть из них либо не официальная, либо не поддерживается. Можно все написать самому, но на это нужно много времени и ресурсов, которых обычно нет. Отсюда вытекает другая проблема, LLM-ки не очень хорошо помогают с написанием кода, часто используют API от реакта, особенно все что касается реактивности.

2️⃣ Сложности работы с сигналами. Вероятно просто нужно набить руку, но за то время, что я успел поработать, очень просто допустить ошибку (например, неправильно деструктурировать пропсы или передать в дочерние компоненты не сам сигнал, а его значение) и потерять всю реактивность. А из-за того что теперь не подебажить консоль логами внутри компонентов (они же вызываются всего один раз), то найти источник проблемы не так просто. Плюс когда начинаешь строить состояние вокруг сигналов и появляются сложные зависимые друг от друга цепочки данных, начинаешь сталкиваться с проблемами, с которыми раньше вообще не приходилось сталкиваться.

3️⃣ Производительность. Странно это относить в минусы, но на одном проекте на tanstack-query (у которого есть адаптеры для солида, что не может не радовать) в какой-то момент весь список элементов начал пересоздаваться при выполнении запроса внутри компонента одного из элементов. И это отрисовывалось с сильными лагами. Внутри tanstack-query все мемоизировалось, но где-то все равно ссылка на объект менялась. Где именно, так и не нашли, так как по всем данным лишних событий не было, но DOM-нода контейнера пересоздавалась. Вероятно эту проблему можно перефразировать так – проблемы с производительностью с текущими инструментами дебага решать намного сложнее, чем в реакте.

Что имеем по итогу? Улучшенная легковесная версия реакта с маленькой экосистемой. Изучить для расширения кругозора, если вы пишете на реакте или хотите познакомиться с сигналами точно рекомендую. Если у вас сильная команда разработчиков, нужно писать сложный и интерактивный интерфейс и есть ресурсы, то SolidJS выглядит очень заманчивым вариантом. Во всех остальных случаях реакт выигрывает.