valtio

Valtio — это библиотека управления состоянием, построенная вокруг JavaScript-прокси и пригодная для использования с React и в чистом vanilla JavaScript. Её основная идея проста: оберните объект состояния с помощью `proxy()`, и он станет самоосознанным прокси, который можно мутировать как обычный объект из любого места кода. Ключевые возможности, описанные в README: - **Прокси-состояние**: `proxy({ count: 0, text: 'hello' })` создаёт мутируемое состояние; мутации вроде `++state.count` работают так же, как с обычными объектами. - **Интеграция с React**: `useSnapshot(state)` возвращает локальный снимок для рендеринга. Компоненты перерисовываются только при изменении тех частей состояния, к которым они обращались, что проект называет оптимизацией рендеринга. Опция `sync: true` отключает батчинг для случаев вроде контролируемых полей ввода. - **Подписки**: `subscribe` работает с целым состоянием или подобъектами, а `subscribeKey` нацелен на примитивные значения. Утилита `watch` автоматически подписывается на основе использования. - **Поддержка Suspense**: Совместимо с хуком `use` из React 19 для чтения асинхронных данных, хранящихся в состоянии, при этом родитель обрабатывает fallback и ошибки. - **Неотслеживаемые объекты**: `ref` сохраняет большие или особые объекты (например, DOM-узлы) внутри состояния, не оборачивая их в прокси. - **Использование в vanilla**: `valtio/vanilla` экспортирует `proxy`, `subscribe` и `snapshot` для использования вне React. - **Утилиты**: `useProxy` предлагает упрощённый поверхностный прокси для новичков; `proxySet` и `proxyMap` имитируют поведение нативных Set и Map; вычисляемые свойства можно определять через геттеры объекта. - **Инструменты разработчика**: Интеграция с Redux DevTools Extension для обычных объектов и массивов. - **Совместимость**: Valtio v2 ориентирован на React 18 и выше, зависит только от `react` и работает с такими рендерерами, как react-dom, react-native и react-three-fiber, а также с Node.js и Next.js. README также отмечает особенности типизации TypeScript вокруг типа снимка только для чтения, предупреждает о поведении `this` в методах (рекомендуя стрелочные функции) и указывает на плагин eslint, а также на рецепты сообщества для организации действий, сохранения состояния, использования контекста и разделения/композиции состояния.