State-management

В современных приложениях очень много данных, с которыми нужно работать и представлять клиенту.

Задача менеджеров состояния заключается в том, чтобы упростить согласование данных и интерфейса.

Принцип работы прост: состояние меняется, интерфейс получает уведомление об этом и перерисовывается.

State

Распространённые механизмы согласования данных и интерфейса:

• React — виртуальное дерево и алгоритм сравнения (diff)
• Vue — реактивность через Proxy и подписки
• Angular — zone.js и механизм change detection
• Signals — подход, применяемый в Solid, Vue, Angular

Клиентский state

Клиентское состояние - это данные, которые мы калькулируем на клиенте и используем для отрисовки интерфейса

State делится на:

1. Локальный — данные внутри одного компонента (useState, isOpen, currentCounter, filters).
2. Глобальный — единое хранилище для всего приложения (Redux, Vuex).
3. Модульный — несколько независимых стораджей для отдельных зон приложения (Zustand, Effector, MobX, Pinia).

Примеры клиентского состояния:

• открыта ли модалка
• выбранная тема
• настройки фильтров
• результаты валидации формы

Эти данные не критично потерять при обновлении страницы или очистке кэша — они живут в рамках пользовательской сессии.

Серверный state

Серверное состояние — это данные, приходящие с бэкенда.

Примеры:

• уведомления
• список карт или счетов
• лента видео

Ранее подход был прост: загрузить данные с сервера и хранить на клиенте, изменяя их по мере необходимости.
Современный подход:

1. Получить данные с сервера.
2. Закэшировать их на клиенте.
3. Актуализировать через:
   • инвалидацию (данные признаны устаревшими и перезапрошены),
   • мутацию (данные изменены на сервере и требуется обновить кэш).

Мутация часто вызывает инвалидацию или оптимистичное обновление (optimistic update), когда UI сразу отражает предполагаемый результат запроса.

Инструменты для серверного state

Современные библиотеки (RTK Query, SWR, React Query) предоставляют:

• кэширование и автоматическую инвалидацию
• polling (периодические запросы)
• retry при ошибках
• optimistic updates
• декларативные API
• работу с коллекциями: пагинацию, бесконечные ленты, batch-запросы

Инвалидация

Инвалидация делает данные неактуальными и инициирует их повторный запрос.

Например, в приложении есть запросы:

• getUserProfile
• getUserSettings
• и мутация updateUser.

После выполнения updateUser кэшированные данные профиля и настроек пользователя перестают быть актуальными и перезапрашиваются.

Итог

Клиентский state — данные для удобства работы пользователя, которые теряются при обновлении страницы.

Серверный state — данные, приходящие из внешнего источника и обновляемые через мутации и инвалидацию.

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