Guide · Open source

How to use MobX: install, observable state and React basics

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

MobX is a JavaScript and TypeScript library for managing application state. You mark data as observable, and it records which code reads that data so that only the dependent computations or UI components re-run when a value changes. This guide shows you how to install it, create observable state, and connect it to a React component.

MobXmobxjs/mobx · ★ 28.2k · MIT Install options & downloads

Quick start

1Check Node.js. Make sure Node.js is installed, since it is the prerequisite listed for MobX.
2Install mobx. Run npm install mobx in your project folder.
3Create an observable object. Wrap a plain object holding state and methods with makeAutoObservable.
4Update state with actions. Change values with normal JavaScript assignment inside methods such as increase() or reset().
5Add React bindings. Install and import observer from mobx-react-lite, then wrap your component with it.
6Read the docs. Use mobx.js.org for full API details and further examples.

Install MobX with npm

MobX is installed as a package through a package manager. The prerequisite listed for this project is Node.js. Run the install command from your project folder.

Prerequisite: Node.js
The README lists the install command as shown in the code block.

npm install mobx

Make your data observable

Mark data as observable and MobX tracks every read and write. The README's quick example uses makeAutoObservable on a plain object that holds a value and the functions that change it. You update the value with a normal JavaScript assignment, not special dispatch code.

Functions on the object that change state are called actions. Events in your app call these actions, and the actions update the observable state.

Use makeAutoObservable(...) to wrap a plain object with state and methods.
Update state with plain assignment, for example this.secondsPassed += 1.
Put state changes in actions, such as increase() and reset().

import { makeAutoObservable } from "mobx"

const myTimer = makeAutoObservable({
    secondsPassed: 0,
    increase() {
        this.secondsPassed += 1
    },
    reset() {
        this.secondsPassed = 0
    }
})

Connect MobX to a React component

The README says MobX is used with React through the mobx-react-lite package. Wrap a component with observer, and MobX detects which observables the component reads during rendering. When that exact field changes, only the component re-renders.

The README's example imports observer from mobx-react-lite and wraps a component that renders timer.secondsPassed. The README does not show the install command for mobx-react-lite, so check its own documentation for that step.

Import observer from mobx-react-lite.
Wrap the component: const TimerView = observer(...).
You do not need to list dependencies manually.

import { observer } from "mobx-react-lite"

const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

Keep state logic outside UI components

Because MobX is unopinionated, you can keep state in plain objects outside any UI framework. The README says this makes code decoupled, portable and easier to test, since you can exercise the state without rendering a component.

Read the full documentation at mobx.js.org for API details beyond this guide.

Define stores or models in their own files.
Test state changes by calling actions directly.
Use the React bindings only in the view layer.

What people use it for

Keeping a timer or counter in sync with a button label in a React app.
Holding frequently changing form or dashboard data that many components read.
Moving application state out of React components so it can be unit tested.
Writing typed reactive stores in a TypeScript project.

Frequently asked questions

How do I install MobX?

Install it with a package manager by running npm install mobx. The README lists Node.js as the prerequisite. Then import functions such as makeAutoObservable from mobx in your code.

Is MobX free to use?

MobX is released under the MIT licence, as stated in the project's repository. Check the LICENSE file in the repository for the full terms.

Does MobX only work with React?

No. The README describes MobX as not tied to any UI framework, and it lets you manage state outside UI code. React support is provided through the mobx-react-lite package.

What is the difference between MobX and Redux?

MobX uses observable state and plain assignment, while Redux is commonly used with action dispatch. Redux is listed alongside MobX as a comparable project in this directory, so choose based on how much structure you want.

Is MobX good for beginners?

The reactivity model takes time to learn, so it is not the best first project for a beginner. If your state is simple, a plain useState hook or a few variables may be enough.

Does MobX work with TypeScript?

Yes. The project is written in TypeScript, and it is suited to TypeScript projects that want typed reactive state.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

MobX suits frontend developers with complex or frequently changing state, especially teams that want state logic outside components and prefer plain assignment. If your state is simple or you want a strongly opinionated framework structure, a built-in hook or another library such as Redux, Zustand, Jotai or Recoil may fit better.

Install options & downloads