Render mobx-state-tree Models in React

    Michel WeststrateMichel Weststrate

    mobx-state-tree uses Mobx behind the scenes, making it super straightforward to render MST models in React. By using the observer wrapper, React components will automatically react to any relevant updates of the rendered models in the future.

    In this lesson you will learn:

    • How observer from the 'mobx-react' package is enough to render data in React components, and get notified of updates
    • That using models in components keeps components dumb so that components can often be stateless function components
    • The mobx devtools can be used to visualize that mobx-react finds the minimal sets of components to re-render after each change automatically for you


    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    Instructor: 00:00 Now, after those first few lessons, I can imagine you get a little bit bored by looking at just the churn or output. Let's start using our models in a React application and build some UI.

    00:18 We have a React application and our codes, side by side. Let's just quickly modify our default set a bit.

    00:28 MobX-state-tree, as you saw, is not very much related to React itself. Actually, it doesn't do anything specifically for React. Because it's powered by MobX behind the scenes, we can use the default MobX-React bindings and have a user interface that automatically reacts to any change you made.

    00:50 This doesn't do anything, of course, yet. Let's expand the app component. Let's introduce some additional components that render our data.

    01:00 First, I'm going to create a component that renders a single wish-list entry. I call it a wish-list-item-view. I put this in this tutorial to make it easily distinguished from the model files. Of course, that's usually less of an issue.

    01:21 This is not too complicated, a simple function component that renders an individual item. I give it a class name, which basically gives it at least decent styling. We render them whenever there's something, a URL provided.

    01:42 Let's render a list of those items. That, of course, needs the component we just created. If in a wish-list model, this is how it would render it. We map over all of the items and we render them.

    02:01 For now, for simplicity, I use ASCII index, which is not something you would normally do. We'll get back to that later. We pass the item. This instance should render to the wish-list-item-view component.

    02:14 Now, we carry this component, as well. We just have to use it in our app component. Of course, we should make sure that we pass these properties in, as well. Let's pass it to the wish list we created here in the index, to the application.

    02:40 We populate our wish list with some initial data, with things that I would find cool to receive at Christmas. There we have it, my super favorite, ListView.

    02:55 That is that. Actually, it doesn't do much interesting stuff. It's just rendering static data out to the dump. What we could do, for example, to prove this, we could create an interval that's every second. Make this product more expensive.

    03:14 That's a pretty stupid feature, but it's just to demonstrate that this UI is, so far, completely static. Nothing happens here. However, dev is something that can easily be changed by levering the MobX-React bindings.

    03:30 What we do is we go to the wish-list-view, and we import observer from MobX-React. Observer makes sure that whenever data is changed -- data that was relevant for the rendering of component -- that component re-renders.

    03:46 If we save these changes, we'll now see that this price and the items are consistently changing. Every second, the price increases, so both components are re-rendering.

    03:59 If you use, for example, the MobX devtools, which you can find in the Chrome or Firefox extension stores, you can actually see the components re-rendering. While it's a bit hard to see on this resolution, this component and the other one are both re-rendering. Relevant data changes, but this book-item doesn't.

    04:24 If I just remove this line, so I don't render the list anymore, it refreshes. You'll see just this component updates every second. It is because of how MobX works. It tracks where there's something relevant for the observer component changes, and only re-renders in that case.

    04:46 Connecting MobX-state-tree to React is as simple as using observer from the MobX-React package.