MobX
Тема дорожной карты · Frontend разработчик
MobX — это проверенная временем реактивная библиотека управления состоянием для JavaScript и TypeScript-приложений, упрощающая управление состоянием за счёт точного отслеживания того, какие observable потребляет каждый компонент, и перерисовки только затронутых компонентов. Ключевые концепции MobX: observable-состояние (отслеживаемые данные), computed-значения (производные данные, обновляющиеся автоматически) и action-функции (единственный способ изменять observable-состояние), структурируемые через API makeObservable или makeAutoObservable. В React компоненты MobX оборачиваются HOC-компонентом observer() из mobx-react-lite, который подписывает компонент на читаемые им observable и запускает эффективные перерисовки без ручных подписок или вызовов useSelector. MobX особенно хорошо подходит для сложных доменных моделей и приложений с богатыми взаимосвязями состояния, а его TypeScript-декораторы и хранилища на основе классов органично вписываются в объектно-ориентированные архитектуры крупномасштабных React и Next.js-приложений.
Как это работает
MobX начинается с локального state компонента (useState); как только двум компонентам нужны те же данные — поднимайте к общему родителю. Для app-wide state выбирайте по сложности: Context API (встроенный, редкие изменения), Zustand (минимальный API, один store, селекторы), Redux Toolkit (предсказуемые reducers, devtools, RTK Query для server state), Jotai/Recoil (atom-based, fine-grained реактивность). Server state (данные с API) — в TanStack Query или SWR, не в глобальном store.
Когда применять
По умолчанию useState + lifting state up; библиотека — только когда prop drilling переваливает 3+ слоя или perf требует селекторов. Zustand — для новых проектов: минимальный API. Redux Toolkit — когда команда знает Redux или нужен RTK Query. Всегда разделяйте server state (TanStack Query) и client state (Zustand/Redux). Для форм react-hook-form — де факто стандарт.
Типичные ошибки
Ловушки MobX: весь state в Redux, когда local state хватает (бойлерплейт без пользы); server-fetched данные в Redux вместо TanStack Query (плохо переизобретаете кеш); чрезмерный Context (ререндер всех consumer на любое изменение); селекторы, всегда возвращающие новый объект (ломают мемоизацию). Прочтите "common mistakes" каждой библиотеки до принятия.