Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Decorators" 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:

Decorators provided syntactic sugar for writing methods and higher order functions.

Get Unlimited Access Now

Transcript from the "Decorators" Lesson

[00:00:03]
>> Steve Kinney: Talk a little bit about, so the last one we talked about was definitely in the spec right now. We're going to talk about one that likes to hover between stage zero. Sometimes maybe getting as far as stage one or two, and then back to zero, which is this pattern, this idea called decorators.

[00:00:21] And decorators are actually syntactic sugar over higher order functions. And we use higher order components earlier, where we wrapped a component and another component. And gave it extra super powers, like connection to the Flux or Redux store. A higher order function is effectively the same thing. And so, it's basically a syntactic sugar allow us to do that.

[00:00:44] And there's different ways, a lot of times we work with it, with object properties. For instance, we've looked at the object at defineProperty before. I showed you the get. Here we can also see enumerable. Can they enumerate over it? Is it writable? We can tweak those and set those on objects that are already in existence.

[00:01:06] There's also configurable and a few other options. But the part of this remember, the target, the key, and then we pass through this thing called a descriptor. And a decorator, if we wanted to create a brand new decorator, is just a function. And the function will take a target, a key, and a descriptor.

[00:01:23] The two parts that we saw there previously. And like it could theoretically be any function. It could be a function that returns another function that does these things. But ideally, it is a function. But if we were going to try to create our own different version, here we have a read only.

[00:01:38] And so, read only will actually take the descriptor of anything we put it in front of. And effectively make it so we never have to write that object a defined property for things where we don't want to. It's again, syntactic sugar over things we didn't want to do.

[00:01:51] So we can say, read only and we'll just set writable to false. And so if we wanna make properties read only now, we can use this decorator before the method name, right? And, generally speaking, you're probably not gonna write a lot of these yourself. Because you can actually pull and a whole bunch of these already exist.

[00:02:13] So if you're tired of writing this.handleChange equals this.handleChange.bindThis. And you don't like that super great syntax I was using, where I was defining it on the class? There is an autobind decorator that will automatically take that method, and go ahead and bind it to the current object. There's also just like kind of like interesting is like deprecate kind of like do a console warn every time someone calls it.

[00:02:39] And there are just ways of doing very common things and wrapping methods in your objects in other functions to do extra things along the way. We saw Memo-wise, very expensive. Transaction you'd only want to do it based on those inputs once. The balances, don't let the thing happen too many times, profile is for performance.

[00:02:56] So this is npm install core-decorators and there's also another one which is lodash decorators which is a whole bunch of these that you can use. One thing I will say is, you'll notice that the create react app examples that we've been using have all been objected. These are currently not necessary in the language.

[00:03:16] You do need a babwl plugin. That babel plugin is currently not installed in create-react-app. So you do need to inject and install your own babel plugins in this case. We're gonna use decorators with MobX. You actually don't need to use decorators to use MobX. But almost all of the documentation and all of the examples are using decorators.

[00:03:40] And it's kind of a nice syntax, so I wanted to go with what you would mostly see consistently. Cuz other than that, it's just a single babel plugin, and then you can use it.