MobX React Bindings

Common errors

• Error: You are trying to observe a component that has already been observed. Please only apply `observer` once.

  cause Attempting to wrap a component with `observer` that is already observed or memoized by `React.memo`.
  fix Ensure `observer` is applied only once to your functional components. Remove any redundant `React.memo` wrappers if present before `observer`.

• Warning: Can't perform a React state update on an unmounted component.

  cause A MobX reaction or observable update attempts to trigger a re-render on a component that has been unmounted, typically due to an asynchronous operation completing after the component is gone.
  fix Use `disposeOnUnmount` for class components or manual cleanup with `useEffect` for functional components to dispose of MobX reactions, autoruns, or other subscriptions when the component unmounts.

• TypeError: Cannot read properties of undefined (reading 'storeName') in component

  cause Trying to access a store injected via `Provider`/`inject` when the component is not wrapped in `inject` or is outside a `Provider` context.
  fix Ensure the component is wrapped with `inject` and rendered within a `Provider` that supplies the necessary stores. For new code, consider `React.createContext` and `useContext` instead.

Warnings

• breaking MobX 4/5 compatibility with mobx-react v5 and earlier. MobX 6+ requires mobx-react v6+.
  Fix: Upgrade `mobx-react` to v6 or higher to support MobX 6.x. Ensure `mobx` is also updated to a compatible version (e.g., `^6.9.0` for `mobx-react@9`).
• deprecated The `Provider` and `inject` API for passing stores through context is considered legacy.
  Fix: For new functional components, use `React.createContext` and `React.useContext` instead. For class components, consider refactoring or creating specific context providers.
• deprecated MobX-React `PropTypes` for observable-based property checkers are largely superseded.
  Fix: Migrate to TypeScript for robust static type checking and better developer experience. If not using TypeScript, standard React `PropTypes` are still applicable for non-observable props.
• gotcha `observer` automatically applies `React.memo` to functional components. Wrapping an already memoized or observed component will throw an error.
  Fix: Do not manually wrap functional components in `React.memo` before passing them to `observer`. Apply `observer` directly.
• breaking Strict mode compatibility changes, particularly with React 18.2+ require `mobx-react` v9+.
  Fix: Ensure `mobx-react` is at least version 9.0.0 to guarantee full compatibility and correct behavior in React's strict mode, especially with React 18.2 and React 19.

Install

• npm install mobx-react npm
• yarn add mobx-react yarn
• pnpm add mobx-react pnpm

Imports

• observer
  wrong:

  import observer from 'mobx-react';

  correct:

  import { observer } from 'mobx-react';

  `observer` is a named export, not a default. It's used as a higher-order component or decorator.
• Provider

  import { Provider } from 'mobx-react';

  While functional, `Provider` and `inject` are considered legacy. `React.createContext` is recommended for new projects.
• inject

  import { inject } from 'mobx-react';

  `inject` is part of the legacy `Provider`/`inject` pattern. Prefer `React.useContext` with `React.createContext` for functional components.

Quickstart

Demonstrates creating a MobX observable store and rendering it in a reactive functional React component using the `observer` HOC.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react';

class TimerStore {
  secondsPassed = 0;

  constructor() {
    makeAutoObservable(this);
    setInterval(() => {
      this.secondsPassed++;
    }, 1000);
  }

  reset() {
    this.secondsPassed = 0;
  }
}

const myTimer = new TimerStore();

const TimerDisplay = observer(() => {
  return (
    <div>
      <p>Seconds passed: {myTimer.secondsPassed}</p>
      <button onClick={() => myTimer.reset()}>Reset Timer</button>
    </div>
  );
});

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
  <React.StrictMode>
    <TimerDisplay />
  </React.StrictMode>
);