{"id":11340,"library":"mobx-react","title":"MobX React Bindings","description":"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.","status":"active","version":"9.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/mobxjs/mobx","tags":["javascript","mobx","mobservable","react-component","react","reactjs","reactive","typescript"],"install":[{"cmd":"npm install mobx-react","lang":"bash","label":"npm"},{"cmd":"yarn add mobx-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add mobx-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core reactive state management library.","package":"mobx","optional":false},{"reason":"React framework for building UIs.","package":"react","optional":false},{"reason":"Underlying dependency for functional component observation in v6/7/9.","package":"mobx-react-lite","optional":false}],"imports":[{"note":"`observer` is a named export, not a default. It's used as a higher-order component or decorator.","wrong":"import observer from 'mobx-react';","symbol":"observer","correct":"import { observer } from 'mobx-react';"},{"note":"While functional, `Provider` and `inject` are considered legacy. `React.createContext` is recommended for new projects.","symbol":"Provider","correct":"import { Provider } from 'mobx-react';"},{"note":"`inject` is part of the legacy `Provider`/`inject` pattern. Prefer `React.useContext` with `React.createContext` for functional components.","symbol":"inject","correct":"import { inject } from 'mobx-react';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { makeAutoObservable } from 'mobx';\nimport { observer } from 'mobx-react';\n\nclass TimerStore {\n  secondsPassed = 0;\n\n  constructor() {\n    makeAutoObservable(this);\n    setInterval(() => {\n      this.secondsPassed++;\n    }, 1000);\n  }\n\n  reset() {\n    this.secondsPassed = 0;\n  }\n}\n\nconst myTimer = new TimerStore();\n\nconst TimerDisplay = observer(() => {\n  return (\n    <div>\n      <p>Seconds passed: {myTimer.secondsPassed}</p>\n      <button onClick={() => myTimer.reset()}>Reset Timer</button>\n    </div>\n  );\n});\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(\n  <React.StrictMode>\n    <TimerDisplay />\n  </React.StrictMode>\n);\n","lang":"typescript","description":"Demonstrates creating a MobX observable store and rendering it in a reactive functional React component using the `observer` HOC."},"warnings":[{"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`).","message":"MobX 4/5 compatibility with mobx-react v5 and earlier. MobX 6+ requires mobx-react v6+.","severity":"breaking","affected_versions":"<6.0.0"},{"fix":"For new functional components, use `React.createContext` and `React.useContext` instead. For class components, consider refactoring or creating specific context providers.","message":"The `Provider` and `inject` API for passing stores through context is considered legacy.","severity":"deprecated","affected_versions":">=6.0.0"},{"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.","message":"MobX-React `PropTypes` for observable-based property checkers are largely superseded.","severity":"deprecated","affected_versions":">=6.0.0"},{"fix":"Do not manually wrap functional components in `React.memo` before passing them to `observer`. Apply `observer` directly.","message":"`observer` automatically applies `React.memo` to functional components. Wrapping an already memoized or observed component will throw an error.","severity":"gotcha","affected_versions":">=9.0.0"},{"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.","message":"Strict mode compatibility changes, particularly with React 18.2+ require `mobx-react` v9+.","severity":"breaking","affected_versions":"<9.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `observer` is applied only once to your functional components. Remove any redundant `React.memo` wrappers if present before `observer`.","cause":"Attempting to wrap a component with `observer` that is already observed or memoized by `React.memo`.","error":"Error: You are trying to observe a component that has already been observed. Please only apply `observer` once."},{"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.","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.","error":"Warning: Can't perform a React state update on an unmounted component."},{"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.","cause":"Trying to access a store injected via `Provider`/`inject` when the component is not wrapped in `inject` or is outside a `Provider` context.","error":"TypeError: Cannot read properties of undefined (reading 'storeName') in component"}],"ecosystem":"npm"}