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 hook into the observability system of MobX and get notified when an observable starts and stops 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... }) }