What are the main changes and new features in MobX 6?

MobX 6 is a major version update of MobX, introducing many important changes and new features. Here are the main changes in MobX 6:

1. Mandatory Use of Actions

MobX 5 and earlier

javascript
class Store {
  @observable count = 0;
  
  increment() {
    this.count++; // Can modify directly
  }
}

MobX 6

javascript
class Store {
  @observable count = 0;
  
  @action // Must use action
  increment() {
    this.count++;
  }
}

In MobX 6, all state modifications must be done within actions. This is to provide better predictability and debugging experience.

2. Changes to Decorator API

MobX 5

javascript
import { observable, computed, action } from 'mobx';

class Store {
  @observable count = 0;
  @computed get doubled() {
    return this.count * 2;
  }
  @action increment() {
    this.count++;
  }
}

MobX 6

javascript
import { makeObservable, observable, computed, action } from 'mobx';

class Store {
  count = 0;
  
  constructor() {
    makeObservable(this);
  }
  
  get doubled() {
    return this.count * 2;
  }
  
  increment() {
    this.count++;
  }
}

MobX 6 recommends using makeObservable instead of decorators, but decorators are still supported.

3. Introduction of makeAutoObservable

MobX 6 introduced makeAutoObservable, which can automatically infer property types:

javascript
import { makeAutoObservable } from 'mobx';

class Store {
  count = 0;
  firstName = 'John';
  lastName = 'Doe';
  
  constructor() {
    makeAutoObservable(this);
  }
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  increment() {
    this.count++;
  }
}

makeAutoObservable will automatically:

• Mark getters as computed
• Mark methods as actions
• Mark fields as observable

4. Simplified Configuration API

MobX 5

javascript
import { configure } from 'mobx';

configure({
  enforceActions: 'always',
  useProxies: 'always',
  computedRequiresReaction: true
});

MobX 6

javascript
import { configure } from 'mobx';

configure({
  enforceActions: 'always', // Default value
  useProxies: 'ifavailable', // Default value
  computedRequiresReaction: false // Default value
});

MobX 6's default configuration is more strict and reasonable.

5. Mandatory Use of Proxy

MobX 6 enforces the use of Proxy (in supported browsers), providing better performance and simpler API.

Advantages of Proxy

• Better performance
• Simpler API
• Better TypeScript support
• Fewer restrictions

Environments without Proxy support

In older browsers or Node.js environments, MobX 6 will automatically fall back to compatibility mode.

6. Removed APIs

The following APIs were removed in MobX 6:

• isObservableObject → Use isObservable
• intercept → Use the interception feature of observe
• extras API → Most features integrated into main API
• toJS → Use toJSON or manual conversion

7. Improved TypeScript Support

MobX 6 has more complete TypeScript support:

typescript
import { makeAutoObservable } from 'mobx';

class Store {
  count: number = 0;
  firstName: string = 'John';
  lastName: string = 'Doe';
  
  constructor() {
    makeAutoObservable(this);
  }
  
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  
  increment(): void {
    this.count++;
  }
}

Type inference is more accurate, and type definitions are more concise.

8. Performance Optimizations

MobX 6 introduced several performance optimizations:

• Faster dependency tracking
• More efficient computed caching
• Better batch update mechanism
• Reduced memory usage

9. Improved Debugging Experience

MobX 6 provides better debugging tools:

• Clearer error messages
• Better stack traces
• Improved DevTools support

10. Migration Guide

Migrating from MobX 5 to MobX 6

1. Update dependencies

bash
npm install mobx@6 mobx-react@6

1. Add action decorators

javascript
// Before
increment() {
  this.count++;
}

// After
@action
increment() {
  this.count++;
}

1. Use makeObservable or makeAutoObservable

javascript
constructor() {
  makeAutoObservable(this);
}

1. Update configuration

javascript
configure({
  enforceActions: 'always'
});

1. Remove deprecated APIs

• Replace toJS with toJSON
• Update isObservableObject to isObservable

Summary

MobX 6 is an important version update with main improvements including:

• Mandatory use of actions for better predictability
• Simplified API and better TypeScript support
• Mandatory use of Proxy for better performance
• Better debugging experience
• Removal of deprecated APIs

Migrating to MobX 6 requires some work, but the improvements are worth it. It's recommended that new projects use MobX 6 directly, and existing projects migrate gradually.