MobX πŸ‡ΊπŸ‡¦

MobX πŸ‡ΊπŸ‡¦

  • API Reference
  • δΈ­ζ–‡
  • ν•œκ΅­μ–΄
  • Sponsors
  • GitHub

β€ΊIntroduction

Introduction

  • About MobX
  • About this documentation
  • Installation
  • The gist of MobX

MobX core

  • Observable state
  • Actions
  • Computeds
  • Reactions {πŸš€}
  • API

MobX and React

  • React integration
  • React optimizations {πŸš€}

Tips & Tricks

  • Defining data stores
  • Understanding reactivity
  • Subclassing
  • Analyzing reactivity {πŸš€}
  • Computeds with arguments {πŸš€}
  • MobX-utils {πŸš€}
  • Custom observables {πŸš€}
  • Lazy observables {πŸš€}
  • Collection utilities {πŸš€}
  • Intercept & Observe {πŸš€}

Fine-tuning

  • Configuration {πŸš€}
  • Decorators {πŸš€}
  • Migrating from MobX 4/5 {πŸš€}
Edit

Installation

MobX works in any ES5 environment, which includes browsers and NodeJS.

There are three types of React bindings:

  • mobx-react-lite. Utilities to manually apply observation
  • mobx-react-observer. Babel/swc plugin to automatically apply observation to components
  • mobx-react. Support for class components

Append the appropriate bindings for your use case to the Yarn or NPM command below:

Yarn: yarn add mobx

NPM: npm install --save mobx

CDN: https://cdnjs.com/libraries/mobx / https://unpkg.com/mobx/dist/mobx.umd.production.min.js

Transpilation settings

MobX and Decorators

Based on your preference, MobX can be used with or without decorators. Both the legacy implementation and the standardised TC-39 version of decorators are currently supported. See enabling-decorators for more details on how to enable them. Legacy decorator support will be removed in MobX 7, in favor of the standard.

Use spec compliant transpilation for class properties

When using MobX with TypeScript or Babel, and you plan to use classes; make sure to update your configuration to use a TC-39 spec compliant transpilation for class fields, since this is not always the default. Without this, class fields cannot be made observable before they are initialized.

  • TypeScript: Set the compiler option "useDefineForClassFields": true.
  • Babel: Make sure to use at least version 7.12, with the following configuration:
    {
        // Babel < 7.13.0
        "plugins": [["@babel/plugin-proposal-class-properties", { "loose": false }]],
    
        // Babel >= 7.13.0 (https://babeljs.io/docs/en/assumptions)
        "plugins": [["@babel/plugin-proposal-class-properties"]],
        "assumptions": {
            "setPublicClassFields": false
        }
    }
    

For verification insert this piece of code at the beginning of your sources (eg. index.js)

if (!new class { x }().hasOwnProperty('x')) throw new Error('Transpiler is not configured correctly');

MobX on older JavaScript environments

By default, MobX uses proxies for optimal performance and compatibility. However, on older JavaScript engines Proxy is not available (check out Proxy support). Examples of such are Internet Explorer (before Edge), Node.js < 6, iOS < 10, Android before RN 0.59, or Android on iOS.

In such cases, MobX can fallback to an ES5 compatible implementation which works almost identically, although there are a few limitations without Proxy support. You will have to explicitly enable the fallback implementation by configuring useProxies:

import { configure } from "mobx"

configure({ useProxies: "never" }) // Or "ifavailable".

This option will be removed in MobX 7.

MobX on other frameworks / platforms

  • MobX.dart: MobX for Flutter / Dart
  • lit-mobx: MobX for lit-element
  • mobx-angular: MobX for angular
  • mobx-vue: MobX for Vue
← About this documentationThe gist of MobX β†’
  • MobX and Decorators
  • Use spec compliant transpilation for class properties
  • MobX on older JavaScript environments
  • MobX on other frameworks / platforms
MobX πŸ‡ΊπŸ‡¦
Docs
About MobXThe gist of MobX
Community
GitHub discussions (NEW)Stack Overflow
More
Star