Note: This is a follow up article based on YouTube screencast I made. If you prefer watching, feel free to watch my screencast. https://youtu.be/pTREFnFCh5E

ES6 introduced an array of cool things to the JavaScript language, check out this great web site, which goes over each one of the new features.

Class fields as of mid 2018 is a TC39 proposal currently on stage 3, I strongly believe it will make it to stage 4 due to its wide spread adoption in the React community.

Class fields enables us to write property values outside of the constructor in classes, you no longer will need to instantiate these values inside the constructor, for example:

React Class component with constructor.

React Class component using class fields.

Looking at both code snippets above, the first with constructor, the second without it. With class fields we no longer need the constructor since the class field will instantiate the property value to the classe's instance.

If we leverage ES6 arrow functions with the class fields, we no longer will need to worry about `this` binding, since the `this` scope inside an arrow function points to the parent scope.
‍

Using ES6 Object Destructuring to access values in objects.

Make use of object destructuring so we don't repeat ourselves when accessing values in `this.props` or `this.state`.

Without object destructuring.

With object destructuring.

Example above uses object destructuring assignment to retrieve `title` and `description` from `this.props`.
‍

Spread operator

We can also use the spread operator to pass down an object as properties of a Component.

Case we had a Header component which received the `title` and `description` props I could spread the `this.props` into it. For example:

By spreading an object to the component as you can see above, the spread operator iterates through each key in the object and passes it down to the component. It works the same as writing `title={title}` and `description={description}`.

But be careful, you don't want to pass down property values which you won't consume in your component.

Combine object destructuring with spread operator.

You can also combine both to get the remaining values inside an object, for example:

‍

By using the spread operator inside the object destructuring you can retrieve the remaining properties.

Curried functions with computed property names.

We can also leverage ES6 computed property name together with curried functions to have a declarative way of updating state of inputs.

Take for example this form:
‍

We define a method for each input to update state. Instead of this we can leverage curried functions to make this much shorter. For example:

Thanks to the computed property values: `{ [fieldName]: evt.target.value }`

We can write this in a much shorter way.

I love JavaScript's growth mindset, instead of us giving up on it, it continues to try to improve its specs.

Thanks for reading, I'm Andrei Calazans a Software Developer in love with learning and teaching. Feel free to reach out and chat.

https://github.com/AndreiCalazans
https://twitter.com/Andrei_Calazans

‍