{"id":11341,"library":"mobx-react-lite","title":"MobX React Lite","description":"mobx-react-lite provides lightweight, performant React bindings specifically designed for functional components and React Hooks, making it a smaller (1.5kB gzipped) and faster alternative to the full `mobx-react` package. It leverages React's modern features, requiring React 16.8 or higher, and offers core functionalities like `observer` for making components reactive, and `useLocalObservable` for managing local observable state within functional components. Unlike its `mobx-react` counterpart, it eschews `Provider`/`inject` in favor of `useContext` for dependency injection. The current stable version is 4.1.1, with recent updates including support for React 19, and its release cadence is closely aligned with MobX and React major version cycles, ensuring compatibility and performance with modern React applications.","status":"active","version":"4.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/mobxjs/mobx","tags":["javascript","mobx","mobservable","react-component","react","reactjs","reactive","hooks","observer","typescript"],"install":[{"cmd":"npm install mobx-react-lite","lang":"bash","label":"npm"},{"cmd":"yarn add mobx-react-lite","lang":"bash","label":"yarn"},{"cmd":"pnpm add mobx-react-lite","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core reactive state management library.","package":"mobx","optional":false},{"reason":"Runtime peer dependency for React component rendering and Hooks API.","package":"react","optional":false}],"imports":[{"note":"The primary way to make functional components reactive. CommonJS `require` is generally not recommended for modern React/MobX applications due to ESM preference.","wrong":"const observer = require('mobx-react-lite').observer;","symbol":"observer","correct":"import { observer } from 'mobx-react-lite';"},{"note":"A render-prop component used for applying observer behavior to anonymous regions or within class components. It's a named import.","wrong":"import Observer from 'mobx-react-lite/Observer';","symbol":"Observer","correct":"import { Observer } from 'mobx-react-lite';"},{"note":"`useLocalObservable` is the recommended hook for creating local observable state within functional components. `useLocalStore` is deprecated since v3.","wrong":"import { useLocalStore } from 'mobx-react-lite';","symbol":"useLocalObservable","correct":"import { useLocalObservable } from 'mobx-react-lite';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { observer, useLocalObservable } from 'mobx-react-lite';\n\nconst Timer = observer(() => {\n  const store = useLocalObservable(() => ({\n    secondsPassed: 0,\n    increment() {\n      this.secondsPassed++;\n    },\n    reset() {\n      this.secondsPassed = 0;\n    },\n    get formattedTime() {\n      return `Seconds: ${this.secondsPassed}`;\n    }\n  }));\n\n  React.useEffect(() => {\n    const handle = setInterval(() => store.increment(), 1000);\n    return () => clearInterval(handle);\n  }, [store]);\n\n  return (\n    <div>\n      <h1>MobX Timer</h1>\n      <p>{store.formattedTime}</p>\n      <button onClick={() => store.reset()}>Reset</button>\n    </div>\n  );\n});\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<Timer />);","lang":"typescript","description":"Demonstrates how to create a reactive functional component using `observer` and manage local observable state with `useLocalObservable`, complete with a MobX store, actions, and computed values."},"warnings":[{"fix":"Upgrade your React installation to version 16.8.0 or newer (e.g., `^16.8.0 || ^17 || ^18 || ^19`).","message":"mobx-react-lite requires React 16.8 or higher due to its reliance on React Hooks. Older React versions are not supported.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Replace `useObserver(() => <MyComponent />)` with `<Observer>{() => <MyComponent />}</Observer>`. For entire components, use `observer(MyComponent)` directly.","message":"The `useObserver` hook is deprecated since mobx-react-lite v3.0.0. Its usage is often incorrect, and the `<Observer>` component provides better decoupling and clarity.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Migrate `useLocalStore` calls to `useLocalObservable`. The initializer function's logic remains largely the same.","message":"The `useLocalStore` hook is deprecated in favor of `useLocalObservable` since mobx-react-lite v3.0.0. While similar, `useLocalObservable` offers clearer semantics and improved TypeScript inference.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"If using class components, install and use `mobx-react`. Alternatively, refactor your class components to functional components to leverage `mobx-react-lite`.","message":"This package is designed exclusively for React functional components. For class components, you must use the `mobx-react` package. Using `observer` from `mobx-react-lite` on a class component will not work as expected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Call `enableStaticRendering(true)` at the very beginning of your SSR entry point to ensure components cleanup after the first render.","message":"In server-side rendering (SSR) environments, `observer` wrapped components should not re-render after the initial pass. Failing to configure this can lead to memory leaks or incorrect behavior.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure all MobX React Hooks are called within a functional component, and follow the Rules of Hooks (e.g., call them at the top level, not in loops, conditions, or nested functions).","cause":"Attempting to use a MobX React Hook (e.g., `useLocalObservable`, `useContext`) outside of a functional React component, or violating other React Hooks rules.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Wrap your functional component with `observer` (e.g., `export const MyComponent = observer(() => { ... });`) or use `<Observer>{() => ...}</Observer>` around the reactive part of your render function.","cause":"The functional component or a part of its render tree is not wrapped with `observer` or `<Observer>`, preventing MobX from automatically reacting to state changes.","error":"MyComponent is not re-rendering when observable state changes."},{"fix":"`useLocalObservable` by default sets `autoBind: true`. Ensure your initializer functions and actions are defined correctly, often as arrow functions or using the concise method syntax in an object literal, so `this` correctly refers to the observable object. If explicitly creating the observable with `observable()`, remember to pass `{ autoBind: true }` in options.","cause":"The `this` context inside a MobX action or getter within `useLocalObservable` might be unbound if `autoBind: true` is not explicitly set or the function is defined in a way that loses `this`.","error":"TypeError: Cannot read properties of undefined (reading 'someProperty') inside an observable store."}],"ecosystem":"npm"}