MobX

MobX reactivity is based on tracking property access during the execution of a tracked function. It does not track values themselves, but rather the "arrows" (references) used to reach those values.

The Core Rule

MobX reacts to any observable property that is read during the execution of a tracked function.

Key Definitions

• "Reading": Dereferencing a property via dot notation (user.name), bracket notation (user['name'], todos[3]), or destructuring (const {name} = user).
• "Tracked Functions":
  • The expression of a computed value.
  • The rendering of an observer React component.
  • The render() method of an observer React class component.
  • The functions passed to autorun, reaction, and when.
• "During": Only observables read while the function is actively executing are tracked. Observables accessed inside asynchronous blocks (like setTimeout, promise.then, or await) spawned by the function are not tracked.

What MobX does NOT react to

• Values obtained from observables but outside a tracked function.
• Observables read in asynchronously invoked code blocks.
• Changing a non-observable variable that happens to point to an observable object.
• Simply referencing an observable object without accessing its properties (e.g., just mentioning message.likes without reading its length or an index).

The observer HoC works by tracking which observables are accessed during the component's render function.

Key behaviors:

• Automatic Subscription: It subscribes the component to any observable read during rendering.
• Precise Re-renders: Components only re-render when the specific observables they depend on change. If an observable is accessible but not actually read during render, it won't trigger a re-render.
• Deep Tracking: It supports deep reading of observables (e.g., todos[0].author.displayName) automatically.
• Efficiency: Unlike frameworks that require explicit dependency declarations or pre-computed selectors, MobX tracks dependencies dynamically and precisely.

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react-lite"

class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increaseTimer() {
        this.secondsPassed += 1
    }
}

const myTimer = new Timer()

// A function component wrapped with `observer` will react
// to any future change in an observable it used before.
const TimerView = observer(({ timer }) => <span>Seconds passed: {timer.secondsPassed}</span>)

ReactDOM.render(<TimerView timer={myTimer} />, document.body)

setInterval(() => {
    myTimer.increaseTimer()
}, 1000)

Reactions should be used sparingly. Before implementing one, evaluate your code against these three principles:

1. Only use Reactions if there is no direct relation between cause and effect: If a side effect is a direct result of a specific action (e.g., a button click), trigger it directly from that action instead of reacting to a state change. Use reactions for broad synchronization (e.g., syncing any form state change to local storage).
2. Reactions shouldn't update other observables: If a reaction's purpose is to calculate a new value based on other observables, use a computed value instead. Reactions should cause effects, not compute data.
3. Reactions should be independent: Do not rely on a specific execution order between different reactions. MobX does not guarantee the order in which reactions run. If one reaction depends on another, they should likely be merged.

When using inheritance with MobX actions, note the following:

1. Prototype vs Instance: Only actions defined on the prototype can be overridden by a subclass.
2. Arrow Functions: If you define an action as an arrow function on the instance (e.g., arrowAction = () => {}), it cannot be overridden by a subclass and will throw a TypeError if you attempt to redefine it.
3. Binding: To avoid using arrow functions for binding this, use action.bound on prototype methods instead.

class Parent {
    // on prototype - OK to override
    action() {}
    boundAction() {}

    // on instance - NOT OK to override
    arrowAction = () => {}

    constructor() {
        makeObservable(this, {
            arrowAction: action,
            action: action,
            boundAction: action.bound,
        })
    }
}

class Child extends Parent {
    // OK
    action() {}
    boundAction() {}

    // THROWS: TypeError: Cannot redefine property: arrowAction
    arrowAction = () => {}
}