Use ES2016 Property Initializer Syntax in ES6 classes
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.
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
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.
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 ?
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!
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
if you use this property initializer syntax kiss goodbye your hmr for arrow functions.