mobx-react

library9.2.1jsnpmunverified

mobx-react provides the official React bindings for MobX, enabling the creation of fully reactive React components that automatically re-render when the observable data they consume changes. The current stable version is 9.2.1, which includes support for React 19 and MobX 6.x. This package offers a complete integration, including support for class-based components, the legacy `Provider`/`inject` mechanism, and `PropTypes` utilities for observable-based property checkers. It differentiates itself from `mobx-react-lite` by offering these additional features for existing codebases or specific architectural needs, whereas `mobx-react-lite` is optimized for modern functional components and Hooks with `React.createContext`. Releases often align with new React and MobX versions, providing timely compatibility updates and bug fixes.

web-framework testing

npm install mobx-react

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · MOBX-REACT

mobx-react

web-frameworkjavascriptv9.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

observer

✓ import { observer } from 'mobx-react';

✗ 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.

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> );

Debug

Known issues

breakingMobX 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`).

affects: <6.0.0

deprecatedThe `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.

affects: >=6.0.0

deprecatedMobX-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.

affects: >=6.0.0

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.

affects: >=9.0.0

breakingStrict 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.

affects: <9.0.0

Errors

Common errors & fixes

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

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.

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

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.

Upgrade

Version history

9.2.1latest on npm

Audit

Dependencies

mobxrequiredCore reactive state management library.

reactrequiredReact framework for building UIs.

mobx-react-literequiredUnderlying dependency for functional component observation in v6/7/9.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/mobxjs/mobx ↗

packagehttps://www.npmjs.com/package/mobx-react ↗

homepagehttps://mobx.js.org ↗