# 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.

# 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')
);


import { observable, observe } from "mobx"
import React from 'react';

const person = observable({
    firstName: "Maarten",
    lastName: "Loother",
})
 
const disposer = observe(person, (change) => {
    console.log(change.type, change.name, "from", change.oldValue, "to", change.object[change.name])
})
 
person.firstName = "Martin"
// Prints: 'update firstName from Maarten to Martin'
 
disposer()
// Ignore any future updates
 
// observe a single field
const disposer2 = observe(person, "lastName", (change) => {
    console.log("LastName changed to ", change.newValue)
})
 
person.lastName = "Luther"
// Prints: 'LastName changed to Luther'
 
disposer2()
// Ignore any future updates

// printing 
export default class App extends React.Component {
  render() {
    return (
      <span>{person.firstName} {person.lastName}</span>
    );
  }
}


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

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()`:

```terminal
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()`:

```terminal
LastName changed to Luther
```

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).

What is MobX.observe?

Overview

Role of MobX.observe

Format

Example