Дебажил ли MobX state?

MobX-состояние дебажат через MobX DevTools, `spy`/`trace`, логирование реакций и React DevTools. Инструменты показывают observable-значения, реакции и что вызвало обновление.

Инструменты отладки MobX

mobx-react-devtools / MobX DevTools

Показывают ре-рендеры компонентов-observer, зависимости, обновления observable.

trace()

Вставляется в computed/reaction, чтобы понять, почему он пересчитался:

import { trace } from 'mobx';

autorun(() => {
  trace(); // выведет, какая зависимость вызвала пересчёт
  console.log(store.value);
});

spy()

Глобально перехватывает все события MobX (изменения, реакции, actions):

import { spy } from 'mobx';
spy((event) => {
  if (event.type === 'action') console.log(event.name);
});

configure({ enforceActions })

Строгий режим — изменения только через actions, ловит нарушения.

React DevTools

Дерево компонентов, лишние ре-рендеры observer-компонентов.

Типичные проблемы при отладке

• Компонент не обновляется → забыли observer или читаете observable вне рендера.
• Лишние ре-рендеры → слишком широкое чтение observable.
• Изменение вне action (в строгом режиме — ошибка).

Коротко для собеседования

MobX-состояние дебажат: MobX DevTools (ре-рендеры, зависимости), trace() (почему пересчитался computed/reaction), spy() (все события — изменения, actions, реакции), configure({ enforceActions }) (строгий режим), React DevTools (лишние ре-рендеры). Частые проблемы — забытый observer и чтение observable вне рендера.