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.
npm install mobx-react-liteVerified import paths — ran on the pinned version, not inferred.
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.
Upgrade your React installation to version 16.8.0 or newer (e.g., `^16.8.0 || ^17 || ^18 || ^19`).
Replace `useObserver(() => <MyComponent />)` with `<Observer>{() => <MyComponent />}</Observer>`. For entire components, use `observer(MyComponent)` directly.Migrate `useLocalStore` calls to `useLocalObservable`. The initializer function's logic remains largely the same.
If using class components, install and use `mobx-react`. Alternatively, refactor your class components to functional components to leverage `mobx-react-lite`.
Call `enableStaticRendering(true)` at the very beginning of your SSR entry point to ensure components cleanup after the first render.
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).
Wrap your functional component with `observer` (e.g., `export const MyComponent = observer(() => { ... });`) or use `<Observer>{() => ...}</Observer>` around the reactive part of your render function.`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.