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: Lifecycle Hooks
slug: lifecycle-hooks
description: Lifecycle Hooks in MobX State Tree
role: "LESSON"
isPublicLesson: false
---

# Lifecycle hooks in MobX State Tree

MobX State Tree provides you with several hooks (actions) that will allow you to trigger code at a certain point in time during the lifetime of your store model. We have already seen two of them in a previous lesson (snapshots lesson), and those hooks were `postProcessor` and `preProcessor` within the `snapshotProcessor` method that is exported from the `types` object from `mobx-state-tree`.

The other hooks (actions) that you can use are:

-   `afterCreate`: This hook is immediately called after an instance is created and the initial values are applied. Children stores will fire their `afterCreate` events **before** their parents. You cannot make assumptions about the parent store in this hook.
-   `afterAttach`: This hook is called as soon as the direct parent of your store is assigned; to put it in a simpler way, when the actual store is attached to another store. If a store is created as part of the parent's store creation, `afterAttach` will also be called. Unlike `afterCreate`, you can safely make assumptions about the parent store of this given store.
-   `beforeDetach`: This hook is called as soon as the store is removed from its direct parent **but** only if this store is **not destroyed**. This hook will only be called when `detach(node)` method is called. Usually, this is something that you would not likely do very often as you could end up with disconnected stores still living in your state but not accessible, so you could potentially have memory leaks, or unexpected results of any kind, etc...
-   `beforeDestroy`: This hook is called before the store is destroyed as a result of calling `destroy(node)`, or by removing or replacing the node from the tree. All stores that are children of the destroyed store will call `beforeDestroy` hook before its parents do.

Let's take a look at some simple examples where we can use these lifecycle hooks.

## `afterCreate` hook

```js { actualFilename=src/after-create-lifecycle.js endChar=1514 endLine=53 startChar=0 startLine=1 statedFilename=src/after-create-lifecycle.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.09/src/after-create-lifecycle.js }
import { types, flow } from "mobx-state-tree";
import { Publication } from "./publication-store";

const User = types
  .model("User", {
    id: types.identifier,
    name: types.string,
    lastName: types.string,
    age: types.number,
    publications: types.array(Publication),
    publicationsStatus: types.enumeration("idle", "fetching", "done", "error"),
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    afterCreate: flow(function* () {
      self.publicationsStatus = "fetching";
      try {
        const data = yield fetchPublicationsFromBackend();
        const publications = yield data.json();
        self.publications = publications;
        self.publicationsStatus = "done";
      } catch (error) {
        console.error("Failed to fetch publications", error);
        self.publicationsStatus = "error";
      }
    }),
  }));

const RootStore = types
  .model("RootStore", {
    users: types.array(User),
    selectedUser: types.safeReference(User),
    state: types.enumeration("idle", "fetching", "done", "error"),
  })
  .actions((self) => ({
    fetchUsers: flow(function* () {
      self.state = "fetching";
      try {
        const data = yield fetchUsersFromBackend();
        const users = yield data.json();
        self.state = "done";
      } catch (error) {
        console.error("Failed to fetch users", error);
        self.state = "error";
      }
      return self.users.length;
    }),
  }));
```

By the code above, we can see that we're defining an action called `afterCreate` in the `User` model. This action will be fired immediately after we perform `User.create()` or it's automatically performed by MobX State Tree in many different situations, for instance, when we're creating the user from within the parent store, etc...

## `afterAttach` hook

```js { actualFilename=src/after-attach-lifecycle.js endChar=1764 endLine=64 startChar=0 startLine=1 statedFilename=src/after-attach-lifecycle.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.09/src/after-attach-lifecycle.js }
import { types, flow, getParent } from "mobx-state-tree";
import { Publication } from "./publication-store";

const User = types
  .model("User", {
    id: types.identifier,
    name: types.string,
    lastName: types.string,
    age: types.number,
    publications: types.array(Publication),
    publicationsStatus: types.enumeration("idle", "fetching", "done", "error"),
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    afterAttach: flow(function* () {
      self.publicationsStatus = "fetching";

      const { publicToken } = getParent(self, 2);

      if (!publicToken) return;

      try {
        const data = yield fetchPublicationsFromBackend(publicToken);
        const publications = yield data.json();
        self.publications = publications;
        self.publicationsStatus = "done";
      } catch (error) {
        console.error("Failed to fetch publications", error);
        self.publicationsStatus = "error";
      }
    }),
  }));

const RootStore = types
  .model("RootStore", {
    users: types.array(User),
    selectedUser: types.safeReference(User),
    state: types.enumeration("idle", "fetching", "done", "error"),
    publicToken: types.string,
  })
  .actions((self) => ({
    fetchUsers: flow(function* () {
      self.state = "fetching";
      try {
        const data = yield fetchUsersFromBackend();
        const users = yield data.json();
        self.state = "done";
      } catch (error) {
        console.error("Failed to fetch users", error);
        self.state = "error";
      }
      return self.users.length;
    }),
  }))
  .actions(() => ({
    afterCreate() {
      self.publicToken = localStorage.get("public-token");
    },
  }));
```

By the code above, we can see that we're defining an action called `affterAttach` in the `User` model and it behaves exactly like `afterCreate`, but in this case, our `fetchPublicationsFromBackend` function required a `publicToken` that was available at the `rootStore` level. Bear in mind that this is a very naive and unusual thing to do. It is intended only for the sake of the example.

## `beforeDetach` hook

```js { actualFilename=src/before-detach-lifecycle.js endChar=1273 endLine=50 startChar=0 startLine=1 statedFilename=src/before-detach-lifecycle.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.09/src/before-detach-lifecycle.js }
import { types, flow } from "mobx-state-tree";
import { sendSignalToBackend } from "./utils/send-signal-to-backend";
import SIGNALS from "./constants";

const User = types
  .model("User", {
    id: types.identifier,
    name: types.string,
    lastName: types.string,
    age: types.number,
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    beforeDetach: flow(function* () {
      try {
        yield sendSignalToBackend(SIGNALS.REMOVE_USER, {
          identifier: self.id,
        });
      } catch (error) {
        console.error(error.message);
      }
    }),
  }));

const GroupStore = types
  .model("GroupStore", {
    users: types.array(User),
    selectedUser: types.safeReference(User),
    state: types.enumeration("idle", "fetching", "done", "error"),
  })
  .actions((self) => ({
    fetchUsers: flow(function* () {
      self.state = "fetching";
      try {
        const data = yield fetchUsersFromBackend();
        const users = yield data.json();
        self.users = users;
        self.state = "done";
      } catch (error) {
        console.error("Failed to fetch users", error);
        self.state = "error";
      }
      return self.users.length;
    }),
  }));
```

For the example above, we could picture an application where we have our users within groups, and when we detach a user from our group store, we would like to notify the backend that this user must be removed from the group so it can sync with other users live on your application to see the change in realtime.

## `beforeDestroy` hook

```js { actualFilename=src/before-destroy-lifecycle.js endChar=1273 endLine=50 startChar=0 startLine=1 statedFilename=src/before-destroy-lifecycle.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.09/src/before-destroy-lifecycle.js }
import { types, flow } from "mobx-state-tree";
import { sendSignalToBackend } from "./utils/send-signal-to-backend";
import SIGNALS from "./constants";

const User = types
  .model("User", {
    id: types.identifier,
    name: types.string,
    lastName: types.string,
    age: types.number,
  })
  .views((self) => ({
    get fullName() {
      return `${self.name} ${self.lastName}`;
    },
  }))
  .actions((self) => ({
    beforeDetach: flow(function* () {
      try {
        yield sendSignalToBackend(SIGNALS.REMOVE_USER, {
          identifier: self.id,
        });
      } catch (error) {
        console.error(error.message);
      }
    }),
  }));

const GroupStore = types
  .model("GroupStore", {
    users: types.array(User),
    selectedUser: types.safeReference(User),
    state: types.enumeration("idle", "fetching", "done", "error"),
  })
  .actions((self) => ({
    fetchUsers: flow(function* () {
      self.state = "fetching";
      try {
        const data = yield fetchUsersFromBackend();
        const users = yield data.json();
        self.users = users;
        self.state = "done";
      } catch (error) {
        console.error("Failed to fetch users", error);
        self.state = "error";
      }
      return self.users.length;
    }),
  }));
```

For the example above, we follow the scenario for the `beforeDetach` hook. Normally you would want to use `beforeDestroy` in favor of `beforeDetach` and `destroy(node)` in favor of `detach(node)` so you don't have disconnected store models floating around your state.
