mobx

mobx Best Practices

MobX provides a powerful, reactive state management solution for React applications. This guide outlines the definitive best practices for using MobX effectively, ensuring predictable state, optimal performance, and maintainable code.

1. Code Organization and Structure

Organize your MobX application for clarity and scalability. A well-defined structure separates concerns, making it easier to navigate and maintain.

1.1. Root Store Architecture

Always create a single RootStore that composes all domain-specific child stores. This provides a central entry point for your application's state and facilitates communication between stores.

❌ BAD: Scattered Store Instantiation

// In App.js or various components
const authStore = new AuthStore();
const userStore = new UserStore();
// ... many other stores

✅ GOOD: Centralized Root Store

// src/stores/RootStore.js
import { AuthStore } from './AuthStore';
import { UserStore } from './UserStore';
import { AlertsStore } from './AlertsStore';

export class RootStore {
  authStore: AuthStore;
  userStore: UserStore;
  alertsStore: AlertsStore;

  constructor() {
    this.authStore = new AuthStore(this); // Pass root for inter-store communication
    this.userStore = new UserStore(this);
    this.alertsStore = new AlertsStore(this);
  }
}

// src/stores/UserStore.js
import { makeObservable, observable, action } from 'mobx';
// import type { RootStore } from './RootStore'; // For TypeScript

export class UserStore {
  // rootStore: RootStore; // Uncomment for TypeScript
  @observable name = '';

  constructor(rootStore /*: RootStore */) { // Add type annotation for TypeScript
    makeObservable(this, {
      name: observable,
      setName: action,
    });
    this.rootStore = rootStore;
  }

  setName(name: string) {
    // Example: Accessing another store
    // if (this.rootStore.authStore.isAuthenticated) { // Uncomment for TypeScript
      this.name = name;
    // }
  }
}