Introduction to the newline guide to building a React App with MobX State Tree

Application Overview

State Management on the JavaScript ecosystem

State Management

What is MobX State Tree?

What will you learn in this course?

Will this course be for you?

Introduction

Introduction to the mental model of MobX State Tree

The Tree in MobX State Tree

Introduction to the store model of MobX State Tree

The Store Model

Introduction to the types in MobX State Tree

Types

Introduction to the model actions of MobX State Tree

Model Actions

Introduction to the model views of MobX State Tree

Model Views

Introduction to the store snapshots of MobX State Tree

Snapshots

Identifiers and references of MobX State Tree

Identifiers and References

Asynchronous Actions

Lifecycle Hooks

Concepts

Arrays in MobX State Tree

Maps

Working with nested stores in MobX State Tree

Nesting Stores

Optimistic Updates

Time Travel

Advanced Concepts

Overview of React and MobX State Tree

Combining MobX State Tree with React via Context and a custom Hook

Context and Hooks

Observable

React

Overview

Building Voyager

mobx-state-tree

In this course, we will create a complete React Application with the state management handled by MobX State Tree, a state container system that is built on MobX, a functional reactive state library.

MobX State Tree will give your application a solid structure and foundation for large-scale applications and for small applications that are expected to scale rapidly. In comparison to Redux, MobX State Tree outstands it in performance with much less boilerplate. MobX is one of the most popular Redux alternatives and it's used by companies all over the world, including Netflix, Grow, IBM, DAZN, Baidu, and more.

During this course, you'll learn:

* Types in MobX State Tree.
* How to create the architecture of a centralized store.
* How to mutate the state via actions that could be asynchronous or not, depending on if we need to perform network requests to persist data into a database via GraphQL.
* Understanding snapshots and how we can benefit from them to time-travel if a network request fails.
* Understanding how MobX State Tree makes use of observable properties and observers.
* Leveraging re-renders in your React Application to MobX observers for better performance optimizations.

By the end of this course, you will have the knowledge and skills that it takes to build a real-world, production-level React Application with a State Management with top-notch performance that can scale with ease.

In this course, we'll show you how to build a React App with MobX State Tree.

The newline Guide to Building a React App with MobX State Tree

How to integrate MobX State Tree within your React App

Dealing with asynchronous flows and time travel to preserve state on networking errors

How to create a scalable store using MobX State Tree

---
title: Observable
slug: observable
description: Using observable to trigger re-renders
role: "LESSON"
isPublicLesson: false
---

# Observable

Our last missing piece to make React and MobX State Tree shine together is something that we need from another library that's part of the MobX ecosystem. That library is `mobx-react-lite`. This library provides you with the `observable` higher-order function that will allow components wrapped within this one to trigger efficient re-renders when the state on your store changes.

    npm install mobx-react-lite
    - or -
    yarn add mobx-react-lite

With our new library installed, we will extend our previous example and make our `<Component />` a little more efficient when triggering re-renders, by introducing a `<User />` component that will be the one used as the observer for a specific user from our list.

```jsx { actualFilename=src/step1/component.jsx endChar=764 endLine=39 startChar=0 startLine=1 statedFilename=src/step1/component.jsx url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.03/src/step1/component.jsx }
import React from "react";
import { Root } from "./root-store";
import { useStore, Provider } from "./use-store";
import { users } from "./mock-users";

const Component = () => {
  const store = useStore();

  return (
    <ul>
      {store.users.map((user) => (
        <User user={user} />
      ))}
    </ul>
  );
};

const User = observer(({ user }) => {
  return (
    <li>
      {user.fullName} - {user.email}
    </li>
  );
});

// We create our store
const rootStore = Root.create({ users });

// This is our application entry point
// and we wrap our application components with
// the top level Provider component that we have created
export default function App() {
  return (
    <Provider value={rootStore}>
      <Component />
    </Provider>
  );
}
```

By making the `<User />` component an `observer`, it will re-render each time any of the properties of the model that are used within the render is updated. This means that if we have two different users on our users list and we update only one, the component that will be re-rendered will be the one using those particular values.

Let's check an example of how this can be achieved:

```jsx { actualFilename=src/step2/component.jsx endChar=991 endLine=45 startChar=0 startLine=1 statedFilename=src/step2/component.jsx url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.03/src/step2/component.jsx }
import React from "react";
import { Root } from "./root-store";
import { useStore, Provider } from "./use-store";
import { users } from "./mock-users";
import { randomNameGenerator } from "./utilities/random-name-generator";

const Component = () => {
  const store = useStore();

  return (
    <ul>
      {store.users.map((user) => (
        <User user={user} />
      ))}
    </ul>
  );
};

const User = observer(({ user }) => {
  const randomNameUpdate = () => {
    user.updateName(randomNameGenerator());
  };

  return (
    <li>
      {user.fullName} - {user.email} -{" "}
      <button onClick={randomNameUpdate}>Update Name</button>
    </li>
  );
});

// We create our store
const rootStore = Root.create({ users });

// This is our application entry point
// and we wrap our application components with
// the top level Provider component that we have created
export default function App() {
  return (
    <Provider value={rootStore}>
      <Component />
    </Provider>
  );
}
```

Our `randomNameGenerator` function is just a function that will return a pseudo-random name, so we should not pay much attention to this as it's intended for example purposes only.

The React VDOM that will be generated should look along the lines of:

```jsx { actualFilename=src/step2/rendered-output.jsx endChar=688 endLine=31 startChar=0 startLine=1 statedFilename=src/step2/rendered-output.jsx url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.03/src/step2/rendered-output.jsx }
<Provider value={rootStore}>
  <Component>
    <User
      user={{
        identifier: "1",
        name: "Alex",
        lastName: "Casillas",
        email: "alex@newline.co",
        username: "alexvcasillas",
        notes: [],
        publications: [],
      }}
    >
      Alex Casillas - alex@newline.co <button>Update Name</button>
    </User>
    <User
      user={{
        identifier: "1",
        name: "Antonio",
        lastName: "Cobos",
        email: "antonio@newline.co",
        username: "acobos",
        notes: [],
        publications: [],
      }}
    >
      Antonio Cobos - antonio@newline.co <button>Update Name</button>
    </User>
  </Component>
</Provider>;
```

The moment we click the button within the first `<User />` component and the `user.name` gets updated in our store, we should see that only the first `<User />` component will be re-rendered and the other `<User />` component will be left as it is. This is because MobX `observer` is smart enough to keep track of which model and model properties are being used on which component, and which ones need to re-render when it's time for a change.

```jsx { actualFilename=src/step2/rendered-output-on-change.jsx endChar=814 endLine=33 startChar=0 startLine=1 statedFilename=src/step2/rendered-output-on-change.jsx url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.03/src/step2/rendered-output-on-change.jsx }
<Provider value={rootStore}>
  <Component>
    {/* Only this component gets re-rendered */}
    <User
      user={{
        identifier: "1",
        name: "Alex",
        lastName: "Casillas",
        email: "alex@newline.co",
        username: "alexvcasillas",
        notes: [],
        publications: [],
      }}
    >
      Daniel Casillas - alex@newline.co <button>Update Name</button>
    </User>
    {/* This compoment does not require re-render and is left as it is */}
    <User
      user={{
        identifier: "1",
        name: "Antonio",
        lastName: "Cobos",
        email: "antonio@newline.co",
        username: "acobos",
        notes: [],
        publications: [],
      }}
    >
      Antonio Cobos - antonio@newline.co <button>Update Name</button>
    </User>
  </Component>
</Provider>;
```

There's also another way to apply `observer` to an anonymous part of your component. This can be achieved by using the `<Observer>` react component that's exposed in `mobx-react-lite`.

```jsx { actualFilename=src/step2/component-alternative.jsx endChar=1055 endLine=49 startChar=0 startLine=1 statedFilename=src/step2/component-alternative.jsx url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.03/src/step2/component-alternative.jsx }
import React from "react";
import { Root } from "./root-store";
import { useStore, Provider } from "./use-store";
import { users } from "./mock-users";
import { randomNameGenerator } from "./utilities/random-name-generator";

const Component = () => {
  const store = useStore();

  return (
    <ul>
      {store.users.map((user) => (
        <User user={user} />
      ))}
    </ul>
  );
};

const User = ({ user }) => {
  const randomNameUpdate = () => {
    user.updateName(randomNameGenerator());
  };

  return (
    <li>
      <Observer>
        {() => {
          return `${user.fullName} - ${user.email}`;
        }}
      </Observer>
      - <button onClick={randomNameUpdate}>Update Name</button>
    </li>
  );
};

// We create our store
const rootStore = Root.create({ users });

// This is our application entry point
// and we wrap our application components with
// the top level Provider component that we have created
export default function App() {
  return (
    <Provider value={rootStore}>
      <Component />
    </Provider>
  );
}
```

Both the `observer()` function and the `<Observer>` component work the same way and as expected. The only advantage that you could see here is that the `<Observer>` component makes only a small part of your component to be re-rendered and with the `observer()` function, your entire component will be re-rendered. But if you fine-grain your components and optimize them, I don't see why you would use `<Observer>` component in favor of `observer()` function; though there might be some edge-cases and scenarios where you would actually be required to use the `<Observer>` component.
