Encontré un comportamiento de MobX muy extraño y no tengo idea de por qué sucede. Intenté buscarlo en Google pero no encontré nada sobre el problema al que me he enfrentado.

Entonces, tengo una tienda MobX muy simple para el mostrador:

 import { makeAutoObservable } from "mobx"; class CounterStore { constructor(initialState) { this.count = initialState ?? 0; makeAutoObservable(this); } dec = () => this.count--; inc = () => this.count++; get color() { return this.count > 0 ? "green" : this.count < 0 ? "red" : "black"; } } export default CounterStore;

Y el CounterMobx que es el componente de la clase React:

 import { observer } from "mobx-react"; import { Component } from "react"; import CounterStore from "../../stores/CounterStore"; const store = new CounterStore(1); const CounterMobx = observer( class extends Component { render() { return ( <div> <button onClick={store.dec}>-</button> <span style={{ color: store.color }}>{store.count}</span> <button onClick={store.inc}>+</button> </div> ); } } ); export default CounterMobx;

Todo funciona bien hasta que agrego el método de ciclo de vida del componentDidMount() al componente CounterMobx :

 componentDidMount() { console.log(store); }

Después de agregar el componentDidMount() cuando intento cambiar el valor de conteo con acciones (haciendo clic en el botón "-" o "+") no sucede nada, el componente dejó de rastrear los valores observables de la tienda

¿Hay algo que estoy haciendo mal o esto es un error?

 "react": "^18.1.0", "mobx": "^6.6.0", "mobx-react": "^7.5.0",