mobx-react

MobX-React is the official binding for using MobX, a simple, scalable, and battle-tested state management library, with React. It acts as a bridge, allowing React components to automatically react to changes in MobX's observable state. \n\nThe core idea behind MobX-React is to enable a component to re-render automatically and efficiently whenever the observable data it relies on changes. This is achieved through the `observer` higher-order component (HOC) or decorator. When a React component is wrapped with `observer`, MobX-React internally tracks all observable properties that are accessed during the component's render method. If any of these observed properties change, the component is automatically scheduled for a re-render. \n\nKey Features and Benefits:\n* Automatic Re-rendering: Developers don't need to manually subscribe or unsubscribe to state changes; `observer` handles it automatically.\n* Fine-Grained Reactivity: Only components that actually *use* the changed observable data will re-render, leading to highly optimized performance and fewer unnecessary re-renders compared to broader state updates.\n* Simplicity and Less Boilerplate: MobX's core philosophy is to be minimalistic and let you write simple, clear code. MobX-React extends this by making integration seamless without extensive boilerplate.\n* Support for Functional and Class Components: `observer` can be used as a function to wrap functional components or as a decorator for class components.\n* Composable State: MobX encourages structuring state in a highly composable and flexible manner, which integrates well with React's component-based architecture.\n\nTo use MobX-React, you typically install both `mobx` (for the core state management logic) and `mobx-react` (for the React bindings). The `observer` function (or decorator) is the primary tool from `mobx-react` that makes your React components reactive.

import React from 'react';
import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react';

// 1. Define a MobX Store
// This store holds our observable state and actions to modify it.
class CounterStore {
  count = 0;

  constructor() {
    // makeAutoObservable automatically makes all properties observable,
    // all methods action, and all getters computed. This is a convenient way
    // to define your store without explicit decorators for each property/method.
    makeAutoObservable(this);
  }

  // Action to increment the count
  increment() {
    this.count++;
  }

  // Action to decrement the count
  decrement() {
    this.count--;
  }

  // Computed value: a derived state that updates automatically
  // whenever 'count' changes.
  get doubleCount() {
    return this.count * 2;
  }
}

// Create a global instance of the store (or pass it via React Context for larger apps).
const counterStore = new CounterStore();

// 2. Create a Reactive React Component using `observer`
// The `observer` HOC (or decorator) makes sure this component re-renders
// whenever any observable data it *uses* from the store changes.
const CounterDisplay = observer(() => {
  return (
    <div>
      <h1>MobX Counter</h1>
      <p>Count: {counterStore.count}</p>
      <p>Double Count: {counterStore.doubleCount}</p>
      <button onClick={() => counterStore.increment()}>Increment</button>
      <button onClick={() => counterStore.decrement()} style={{ marginLeft: '10px' }}>Decrement</button>
    </div>
  );
});

// 3. Render the Reactive Component in your App
function App() {
  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif', textAlign: 'center' }}>
      <CounterDisplay />
    </div>
  );
}

export default App;