Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

mobx
state management
observe

What is MobX.observe?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

svg viewer

Overview

MobX is a state-management JavaScript library that works well alongside React. One of the key features that MobX provides is it makes the objects in the your application observables. These observables are then continuously inspected to detect any change in state. This detection of a change in state lets the application take necessary actions.

Role of MobX.observe

The observe function can be used to inspect changes after they have been committed. You can use it to monitor the observables in the application.

svg viewer

Format

observe(target, propertyName?, listener, invokeImmediately?)
Argument Description
target The observable to observe.
propertyName? Optional parameter to observe a specific property of the observable.
listener Callback that will be invoked for each change that is made to the observable.
invokeImmediately? By default, it’s false. Set to true if you want observe to invoke listener directly with the state of the observable (instead of waiting for the first change).

CAUTION: observe(target, listener) is fundamentally different from observe(target, propertyName?, listener). The first observes the current value inside target, which might not be an observable at all, and the latter observes a specific property of the target.

Example

Let’s take a look at the following code snippet:

import React from 'react';


import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

In the code example above, there are a couple of things to note:

  • The object person has two observables: firstName and lastName.
  • disposer: The observe function has two arguments: person(target) and change(callback).
  • disposer2: The observe function has three arguments: person(target), lastName (property), and change(callback).

As soon as the firstName updates from Maarten to Martin, the disposer() is called and outputs the following string specified in console.log():

update firstName from Maarten to Martin

Later, when the lastName field updates from Loother to Luther, the disposer2() is called and outputs the following string specified in the console.log():

LastName changed to Luther

RELATED TAGS

mobx
state management
observe
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring