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: Context and Hooks
slug: context-and-hooks
description: Combining MobX State Tree with React via Context and a custom Hook
role: "LESSON"
isPublicLesson: false
---

# React Context and hooks

As we have stated in the previous lesson, the recommended way to share your models accross your application is via `React.createContext` and making use of a custom React hook to consume our stores from within the components.

Let's create our stores' definitons:

```js { actualFilename=src/step0/root-store.js endChar=188 endLine=10 startChar=0 startLine=1 statedFilename=src/step0/root-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.02/src/step0/root-store.js }
import { types } from "mobx-state-tree";

import { User } from "./user-store";

export const Root = types.model("Root", {
  users: types.array(User),
});

const rootStore = Root.create();
```

```js { actualFilename=src/step0/user-store.js endChar=725 endLine=32 startChar=0 startLine=1 statedFilename=src/step0/user-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.02/src/step0/user-store.js }
import { types } from "mobx-state-tree";

import { Notes } from "./notes-store";
import { Publications } from "publications-store";

export const User = types
  .model("User", {
    identifier: types.identifier,
    name: types.string,
    lastName: types.string,
    email: types.string,
    username: types.string,
    notes: types.array(Notes),
    publications: types.array(Publications),
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    addNote(note) {
      self.notes.push(note);
    },
    addPublication(publication) {
      self.publications.push(publication);
    },
    updateName(name) {
      self.name = name;
    },
  }));
```

```js { actualFilename=src/step0/notes-store.js endChar=437 endLine=21 startChar=0 startLine=1 statedFilename=src/step0/notes-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.02/src/step0/notes-store.js }
import { types, getParent } from "mobx-state-tree";

export const Notes = types
  .model("Notes", {
    identifier: types.identifier,
    content: types.string,
    completed: types.boolean,
    createdAt: types.Date,
    updatedAt: types.Date,
  })
  .views((self) => ({
    get user() {
      return getParent(self, 2);
    },
  }))
  .actions((self) => ({
    toggleCompleted() {
      self.completed = !self.completed;
    },
  }));
```

```js { actualFilename=src/step0/publications-store.js endChar=405 endLine=17 startChar=0 startLine=1 statedFilename=src/step0/publications-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.02/src/step0/publications-store.js }
import { types, getParent } from "mobx-state-tree";

export const Publications = types
  .model("Publications", {
    identifier: types.identifier,
    content: types.string,
    createdAt: types.Date,
    updatedAt: types.Date,
    likes: types.optional(types.number, 0),
    comments: types.array(types.string),
  })
  .views((self) => ({
    get user() {
      return getParent(self, 2);
    },
  }));
```

Now that we have all of our stores in place, we are going to create our React context and our custom hook.

```js { actualFilename=src/step1/use-store.js endChar=505 endLine=17 startChar=0 startLine=1 statedFilename=src/step1/use-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.02/src/step1/use-store.js }
import { createContext, useContext } from "react";

const RootStoreContext = createContext(null);

// Provider is a higher order component that
// will have a prop `value` that will accept our store
// so we can access it from child components of this one
export const Provider = RootStoreContext.Provider;

export function useStore() {
  const store = useContext(RootStoreContext);
  if (store === null) {
    throw new Error("Store cannot be null, please add a context provider");
  }
  return store;
}
```

We will make use of this `useStore` hook from within our components to access the store from the root of it.

```jsx { actualFilename=src/step1/component.jsx endChar=643 endLine=32 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.02/src/step1/component.jsx }
import React from "react";
import { Root } from "./root-store";
import { useStore, Provider } from "./use-store";

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

  return (
    <ul>
      {store.users.map((user) => (
        <li>
          {user.fullName} - {user.email}
        </li>
      ))}
    </ul>
  );
};

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

// 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>
  );
}
```

Let's imagine that our `users` property from the root store is populated with some users content like the following:

```js { actualFilename=src/step1/mock-users.js endChar=359 endLine=21 startChar=0 startLine=1 statedFilename=src/step1/mock-users.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_03/lesson_03.02/src/step1/mock-users.js }
const users = [
  {
    identifier: "1",
    name: "Alex",
    lastName: "Casillas",
    email: "alex@newline.co",
    username: "alexvcasillas",
    notes: [],
    publications: [],
  },
  {
    identifier: "1",
    name: "Antonio",
    lastName: "Cobos",
    email: "antonio@newline.co",
    username: "acobos",
    notes: [],
    publications: [],
  },
];
```

If you were to render the `<Component />` we have just created with that mocked data, you should have some output in your DOM like this:

```jsx { actualFilename=src/step1/rendered-output.jsx endChar=101 endLine=5 startChar=0 startLine=1 statedFilename=src/step1/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.02/src/step1/rendered-output.jsx }
<ul>
  <li>Alex Casillas - alex@newline.co</li>
  <li>Antonio Cobos - antonio@newline.co</li>
</ul>;
```

And that's how easily you can bind MobX State Tree and React! But we're missing an important piece in order to make everything shine and work as expected from this connection. If we were to update a user model with some new values, the output would not change because we're not observing our state yet.
