A reactive UI

On the topic of reactions, it is worth mentioning that the UI is one of the most glorious reactions (or side-effect) you can have in an app. As we saw in the earlier chapter, UI depends on data and applies a transformation function to generate the visual representation. In the MobX world, this UI is also reactive, in the sense that it reacts to the changes in data and automatically re-renders itself. 

MobX provides a companion library called mobx-react that has bindings to React. By using a decorator function (observer()) from mobx-react, you can transform a react component to observe the observables used in the render() function. When they change, a re-render of the react component is triggered. Internally, observer() creates a wrapper component that uses a plain reaction() to watch the observables and re-render as a side-effect. This is why we treat UI as being just another side-effect, albeit a very visible and obvious one. 

A short example of using observer() is shown next. We are using a stateless functional component, which we are passing to the observer. Since we are reading the item observable, the component will now react to changes in item. After two seconds, when we update item, the ItemComponent will automatically re-render. Take a look at this:

import { observer } from 'mobx-react';
import { observable } from 'mobx';
import ReactDOM from 'react-dom';
import React from 'react';

const item = observable.box(30);

// 1. Create the component with observer
const ItemComponent = observer(() => {
    // 2. Read an observable: item
    return <h1>Current Item Value = {item.get()}</h1>;
});

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

// 3. Update item
setTimeout(() => item.set(50), 2000);

We will cover mobx-react in Chapter 3, A React App with MobX, and also throughout this book.