Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "MobX data structures: arrays, objects, and maps" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Overview of the types of data structures available in MobX.

Get Unlimited Access Now

Transcript from the "MobX data structures: arrays, objects, and maps" Lesson

>> Steve Kinney: So we've seen it with classes. We could also observe objects or arrays. And my favorite part about using observable with arrays, is that you can push stuff onto the array, and that is a legit away to render UI again. You don't have to like concat things on or spread operator all over the place.

[00:00:18] You can actually just push things on. It basically takes all of the methods that arrays have and that objects have and does immutable versions of those. So you can push something on, it will have the same object, but it will have triggered the observable to let everything know.

[00:00:32] So that code of honor that we walk in with react is like never mutate state, right? Because the way Java Script works is if you change an array, and push something that has still the same array and memory. And like React and Ember and all those things have a really hard time knowing the array has changed.

[00:00:49] Versus if you replace the arrays. Like this is a totally different array, I should rerender. With this, you can actually put stuff on. And because the observable can let things know that things have changed, you can actually do all the habits you've been working so hard to break.

[00:01:03] There's one caveat, maps are really cool. Does anyone not know what a map is in JavaScript? I'm going to make believe someone said yes that they don't know. Which is, a map is very much like an object except objects keys can only be strings or numbers. A map can have anything as the key.

[00:01:28] It can have an object as the key, it could have a function as the key, it could have another map as the key. But they're just like a slightly more flexible version of objects. And the reason I bring it up, they are very cool. Just FYI, if you need to, rather than, what is the string version of this?

[00:01:44] If you wanna associate it another value, you should definitely use a map. Is that they use a set, and I get syntax automatically. If you use observable with a regular, plain old JavaScript object, and then you add a new property later? Remember how we saw that when we used observable or extended observable, and iterate it over all the keys, and that made observable, so you add a new key.

[00:02:08] That's just a new key, it's not been observed. A map will actually be able to go through the process and make that also observable. So if you plan on adding new keys to this object later, use a map. If you're not ever gonna change the object's keys, you can use an object.

[00:02:23] But which is a little caveat that I think you'll be happy to know. And just to kinda like tie some things together, under the hood, the way this is working is, instead of having properties we're having thunks all over the place, right? These are, we're getting different functions that can either resolve to a previous thing or alert different things.

[00:02:44] Very cool, so we've looked at mobx in isolation. We've even seen that we can effectively re-render UI with it. Let's look at how that actually works with React.