Use ES2016 Property Initializer Syntax in ES6 classes

Share this video with your friends

Send Tweet

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.

jhonnatan Gonzalez
jhonnatan Gonzalez
~ 8 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 Slaars(instructor)
~ 8 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
~ 7 years ago
Felipe Carlos
Felipe Carlos
~ 7 years ago
Felipe Carlos
Felipe Carlos
~ 7 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
~ 7 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
~ 7 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
~ 7 years ago

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