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: Optimistic Updates
slug: optimistic-updates-in-mobx-state-tree
description: Optimistic updates in MobX State Tree
role: "LESSON"
isPublicLesson: false
---

# Optimistic updates in MobX State Tree

Optimistic updates are a key feature of modern web development. We always expect that everything is going to be smooth and successful, even though it might not be due to the complexity of the applications that we develop. One key feature is the "optimistic updates"; but what are these optimistic updates about?

Optimistic updates happen on the client-side rendering of the server response. Let's picture a simple example: the like button on a tweet. Whenever you press the like button on a certain tweet, you immediately receive a success feedback and a very nice animation telling you that you have liked the given tweet, but in the background, it's making a network request to Twitter's servers and requesting that you'd like to like this given tweet. Even though the client application didn't have any response from the backend yet, it shows that the operation was successful in the first place. If the backend now comes with a different response; let's imagine that the backend threw a 5xx error, the UI will update accordingly and "dislike" the tweet (we actually didn't perform this operation, not successfully) and show some notification on their application telling you something along the lines of: "Oops... we couldn't like that tweet".

If you think of the complexity of this, you could think that this is indeed complex, but with MobX State Tree, we can easily implement optimistic updates in any application.

Let's start by creating a store that represents a `Tweet` and some actions to like that tweet:

```js { actualFilename=src/step0/tweet-store.js endChar=679 endLine=28 startChar=0 startLine=1 statedFilename=src/step0/tweet-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.04/src/step0/tweet-store.js }
import { types, flow, onSnapshot } from "mobx-state-tree";

export const Tweet = types
  .model({
    identifier: types.identifier,
    content: types.string,
    liked: types.optional(types.boolean, false),
    createdAt: types.Date,
    updatedAt: types.Date,
  })
  .actions((self) => ({
    likeTweet: flow(function* () {
      // Here we will perform the request to the server
    }),
  }));

const tweet = Tweet.create({
  identifier: "tweet-123",
  content: "This is my optimistic updated tweet",
  createdAt: new Date(),
  updatedAt: new Date(),
});

// Here we will see all of the updates made to the model
onSnapshot(tweet, (snapshot) => {
  console.log(snapshot);
});
```

Now that we have our `Tweet` store in place and created, we will add the request to the server in our `flow` generator function (async/await like) and perform the optimistic update.

```js { actualFilename=src/step1/tweet-store.js endChar=1531 endLine=44 startChar=0 startLine=1 statedFilename=src/step1/tweet-store.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.04/src/step1/tweet-store.js }
import { types, flow, onSnapshot } from "mobx-state-tree";
import { likeAtTweet } from "../fetch-service";
import { showNotification } from "../notification-service";

export const Tweet = types
  .model({
    identifier: types.identifier,
    content: types.string,
    liked: types.optional(types.boolean, false),
    createdAt: types.Date,
    updatedAt: types.Date,
  })
  .actions((self) => ({
    likeTweet: flow(function* () {
      // We perform the optimistic update for the UI!
      self.liked = true;
      // Here we will perform the request to the server
      try {
        /**
         * This `likeATweet` function is just a dummy function!
         * Here you will do a usual `fetch` with the method type
         * that your API is expenting with the data that is
         * also expecting.
         * But we should keep this simple for the sake of the example :)
         */
        yield likeAtTweet(self.identifier);
      } catch (error) {
        // Something strange happened when performing the request!
        showNotification("error", error.message); // Let the user know something odd has happened
        // And now we revert the changes made on the `liked` property so
        // our UI reacts properly
        self.like = false;
      }
      // Let's update the `updatedAt` properly so we know
      // when this have happened
      self.updatedAt = new Date();
    }),
  }));

// Here we will see all of the updates made to the model
onSnapshot(tweet, (snapshot) => {
  console.log(snapshot);
});
```

Thanks to the `onSnapshot` method, we can check how this will perform without going deeper into UI integration. We will take a look at that part later on.

```js { actualFilename=src/step1/output.js endChar=958 endLine=40 startChar=0 startLine=1 statedFilename=src/step1/output.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_02/lesson_02.04/src/step1/output.js }
const tweet = Tweet.create({
  identifier: "tweet-123",
  content: "This is my optimistic updated tweet",
  createdAt: new Date(),
  updatedAt: new Date(),
});

tweet.likeTweet();

/**
 * We will omit some properties for a better showcase
 *
 * `likeTweet` -> self.liked = true
 * console output: { identifier: 'tweet-123', ..., liked: true }
 *
 * UI reacts with the like animation 💓
 *
 * Something strange happened on server!
 * console output: { identifier: 'tweet-123', ..., liked: false }
 *
 * UI reacts removing the like 💔
 * UI shows notification with `showNotification`
 *
 */

tweet.likeTweet();

/**
 * We will omit some properties for a better showcase
 *
 * `likeTweet` -> self.liked = true
 * console output: { identifier: 'tweet-123', ..., liked: true }
 *
 * UI reacts with the like animation 💓
 *
 * Everything is successful on the server!
 * console output: { identifier: 'tweet-123', ..., liked: true, updatedAt: '07-06-2022' }
 *
 */
```
