💪 React + MobX Crash Course (in 5 pics!)
Tags: react, javascript, webdev, beginners
Published: 2019-12-03 13:25:39

*Originally posted on Twitter as a thread: [https://twitter.com/hexrcs/status/1201593792417144833](https://twitter.com/hexrcs/status/1201593792417144833)*

State management in React apps can be a hard thing to do.

Are you having a hard time wrapping your head around React state management, and getting tired of writing boilerplate for Redux?

Let's check out [MobX](https://github.com/mobxjs/mobx) - everything becomes so simple and effortless 😃

👇 Here's a 5-minute React + MobX crash course for you! 🥳

## 1 - MobX Concepts

MobX is a "reactive" state management library.

We directly mutate the state. Because we use MobX to observe and track mutations, the UI will be auto-updated, like cell updates in Excel. Network requests can also auto-send when conditions are met.

Everything is automatic!

![MobX Concepts](https://i.imgur.com/9zqUM2a.png)

## 2 - Decorator and observable

We normally use the decorator syntax to mark fields in a class "MobX observables" - easy to use or read. This way, normal JS stuff gets "enhanced" (eg. a JS number becomes an observable that can be tracked).

Grouping state logic in a "store" also makes our code more modular.

![Decorator and observable](https://i.imgur.com/69Buoof.png)

## 3. Action and Computed

In addition to `@observable`, we also have:

`@computed` - derived state from other observable/computed that can be used just like observables. Getter syntax is required. The derivation is automatic.

`@action` - batched state mutations. Reactions will only be triggered by the update when the action completes.

![Action and Computed](https://i.imgur.com/WRTYfQi.png)

## 4. Reactions

We can use `autorun()` or `when()` to watch observables and perform effects when there's update

`autorun()` takes a callback and runs it each time any observable used in it gets updated. (Remember to do the clean-up!)

`when()` only runs the callback once, when a condition is met.

![Reactions](https://i.imgur.com/kGKGSjY.png)

## 5. Using MobX with React

`mobx-react` binding lets us use MobX with React without writing `autorun` functions to rerender components.

We use `@observer` as a decorator to a class component, or HoC wrapping a function component. This creates an observer component that tracks observables needed during render, and auto rerenders whenever an update is observed.

![Using MobX with React](https://i.imgur.com/jTaDvPn.png)

## Summary

And that's it, everything you need to start using MobX effectively. Pretty effortless, isn't it? 😃

If you are curious how MobX works under the hood, check out this amazing talk "[Reinventing MobX](https://www.youtube.com/watch?v=P_WqKZxpX8g)" by Max Gallo.

{% youtube P_WqKZxpX8g %}

###Credits

*Thank you so much [Michel Weststrate](https://twitter.com/mweststrate) for creating this amazing library, and helping to review this crash course! 🙌*

*(Thread crash course format inspired by [Chris Achard](https://twitter.com/chrisachard) 😁 Check out his excellent React/Redux, Git crash courses!)*

---

While you are still here, if you've got 13 more minutes and are interested in learning the new hot framework Svelte, I've also got a crash course with companion videos here 👉 [**Svelte Crash Course** 🔥](https://dev.to/hexrcs/svelte-crash-course-with-pics-27cc)

I've also got another [**GraphQL Crash Course** 🔥](https://dev.to/hexrcs/graphql-crash-course-in-10-pics-3b04) 👈 Check it out!


&nbsp;

**Like this post?**

*I'll be posting more on Twitter: [@hexrcs](https://twitter.com/hexrcs)*<br />*You can also find me at my homepage: [xiaoru.li](https://www.xiaoru.li)*<br />