Render mobx-state-tree Models in React

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.