MobX

MobX

  • API Reference
  • 中文
  • Sponsors
  • GitHub

›Tips & Tricks

Introduction

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

MobX core

  • Observable state
  • Actions
  • Computeds
  • Reactions {🚀}

MobX and React

  • React integration
  • React optimizations {🚀}

Tips & Tricks

  • Defining data stores
  • Understanding reactivity
  • Analyzing reactivity {🚀}
  • Computeds with arguments {🚀}
  • MobX-utils {🚀}
  • Custom observables {🚀}
  • Lazy observables {🚀}
  • Collection utilities {🚀}
  • Intercept & Observe {🚀}

Fine-tuning

  • Configuration {🚀}
  • Enabling decorators {🚀}
  • Migrating from MobX 4/5 {🚀}
Edit

Creating lazy observables {🚀}

Usage:

  • onBecomeObserved(observable, property?, listener: () => void): (() => void)
  • onBecomeUnobserved(observable, property?, listener: () => void): (() => void)

Functions onBecomeObserved and onBecomeUnobserved can be used to attach lazy behavior or side effects to existing observables. They are hooks into the observability system of MobX and get notified when the observables start and stop becoming observed. They both return a disposer function that detaches the listener.

In the example below we use them to perform network fetches only when the observed value is actually in use.

export class City {
    location
    temperature
    interval

    constructor(location) {
        makeAutoObservable(this, {
            resume: false,
            suspend: false
        })
        this.location = location
        // Only start data fetching if temperature is actually used!
        onBecomeObserved(this, "temperature", this.resume)
        onBecomeUnobserved(this, "temperature", this.suspend)
    }

    resume = () => {
        log(`Resuming ${this.location}`)
        this.interval = setInterval(() => this.fetchTemperature(), 5000)
    }

    suspend = () => {
        log(`Suspending ${this.location}`)
        this.temperature = undefined
        clearInterval(this.interval)
    }

    fetchTemperature = flow(function* () {
        // Data fetching logic...
    })
}
← Custom observables {🚀}Collection utilities {🚀} →
MobX
Docs
About MobXThe gist of MobX
Community
GitHub discussions (NEW)Stack Overflow
More
Star