Use ES2016 Property Initializer Syntax in ES6 classes

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

Create react app provides support for es2016 property initializer syntax out of the box. In this lesson, we’ll refactor the App component to use property initializers and look at the advantages of this syntax.

[00:00] In this component, we're using the constructor to define this application's initial state. We're also binding the custom methods that we've defined to this, ensuring that those methods have the correct context when reading state and calling set state for updates.

[00:14] These binding statements are a bit redundant. They are also easy to forget about, so you try to run your app, and a call to set state doesn't work as expected. Luckily, create React app shifts with the proper configuration to allow us to use property initializer syntax.

[00:29] To demonstrate, let's convert the code in this constructor into property initializers. I'm going to start by grabbing the entire initial state object, and cutting that, and putting it above the constructor. I'm going to remove the reference to this.

[00:44] With property initializer syntax, state is now an instance property of this class just like it was before, and it's still available as this.state in this component's methods. Let's take a look at these method bindings. Each one of these is simply binding this to the method so that we have access to this.setState and this.state within those methods.

[01:08] If we initialize these methods as properties, then we don't need to add this extra binding. For this, all we have to do is update each of these. We're going to set handle submit as a property, to equal an error function that handles our event. I'm going to do the same thing with handle empty submit.

[01:26] Adding equal sign and a fat arrow. The same again with handle input change. Now that we've made those updates, we can come back up to our constructor and we can get rid of these extra bind statements. Now that we've done all that refactoring, we're left with a constructor that simply calls super.

[01:46] If I save this, and without the browser reload, we can come over here and I'm going to open up the dev tools. We'll see in the console that there's a warning that we have a useless constructor. We can just go in here and we can take the constructor out, because we're no longer doing anything unique to our component limit.

[02:04] We can save that again. When the browser reloads the useless constructor warning goes away. We can verify that we didn't break anything with our refactoring. We'll try to submit an empty form. We'll get a warning.

[02:22] If I give it a valid entry, I should be able to submit. It updates our to-do list.

jhonnatan Gonzalez
jhonnatan Gonzalez
~ 5 years ago

Is there any performance implication when using this syntax? Taking a look of the babel playground when you create a method of a class it gets transpiled and added to the prototype however, with class initializer the method is added to every instance yo create. How will this affect multiple component in React? you can check it in this link

Andy Van Slaars
Andy Van Slaarsinstructor
~ 5 years ago

jhonnatan,

You're right, it will create the function for each instance of the component when using this syntax. In this case, all of the methods are attached to the top-level App component, so there will typically only be a single instance. I suppose there is potential for performance implications, but it would depend greatly on the scale of your application and how many instances you are creating of class components.

Felipe Carlos
Felipe Carlos
~ 5 years ago
Felipe Carlos
Felipe Carlos
~ 5 years ago
Felipe Carlos
Felipe Carlos
~ 5 years ago

Hello, Andrew.

I made my code just like yours, but I have this error!

./src/App.js Line 8: 'state' is not defined no-undef Line 17: 'handleSubmit' is not defined no-undef Line 29: 'handleEmptySubmit' is not defined no-undef Line 36: 'handleInputChange' is not defined no-undef

Search for the keywords to learn more about each error.

do you can help me ?

Elliott
Elliott
~ 5 years ago

Hello, Andrew.

I made my code just like yours, but I have this error!

./src/App.js Line 8: 'state' is not defined no-undef Line 17: 'handleSubmit' is not defined no-undef Line 29: 'handleEmptySubmit' is not defined no-undef Line 36: 'handleInputChange' is not defined no-undef

Search for the keywords to learn more about each error.

do you can help me ?

---- > Same error!

Nino Harris
Nino Harris
~ 4 years ago

Hi Andrew, great course so far.

Was wondering something though: The previous lesson uses submitHandler = this.handleSubmit or this.handleEmptySubmit and we were able to see which function was attached to the TodoForm component in the react devtools.

However, property initialisers assume the function is anonymous and in the props part of the devtools show up as 'fn()...' instead of the function name. Is there a way to have both the => syntax but also clearer debugging in devtools?

Many thanks

ajando
ajando
~ 4 years ago

if you use this property initializer syntax kiss goodbye your hmr for arrow functions.