How to write easy to understand React code using class properties syntax

How to write easy to understand React code using class properties syntax

Today we will see a way of simplifying React code by removing the need of binding every new event handler we add to the component.

Take a look at the below code:

Live Demo: https://codesandbox.io/s/boring-wu-qud80

Here we have a counter initialized to zero at the start. We also have added an event handler which increases the counter value by one, when we click on the “Add One” button.

To make use of the keyword this inside the event handler, we have to bind it in the constructor

this.handleAddOne = this.handleAddOne.bind(this);

Also, just for declaring the state, we have to create a constructor, add a super call inside it and then we can declare the state.

This is not just cumbersome but also makes the code unnecessarily complicated.

As the number of event handlers increases, the number of .bind calls also gets increased. We can avoid doing this using the class properties syntax.

The create-react-app already has in-built support for it and you can start using this syntax right now.

So let’s explore in detail.

The class properties syntax allows us to bind the properties like state or instance variables directly inside the class without the need for the constructor.

_As you know the arrow functions do not have their own this context. It takes this context from where the function is placed. So we can convert the event handlers to arrow function syntax which will use the class context which will remove the need of binding this.

So now, rewrite the above counter example using this new syntax:

Live Demo: https://codesandbox.io/s/twilight-sea-lnk6z

As you can see, we have moved state declaration from constructor to directly inside the class, which will make the state as the property of the class. Also, we have converted the handleAddOne event handler from function syntax to arrow function syntax.

So the function will preserve this context. So in the end, we have completely removed the need of adding a constructor which will make our code clean and easier to understand.

This is not just limited to event handlers, you can convert any function defined inside the component to an arrow function to avoid binding of this.

Using the class properties syntax is a new standard in React world now and everyone is actively using it.

Installation:

  • The create-react-app has in-built support for it so you can directly use this new syntax without any configuration.

  • If you are using your own webpack setup as explained in this article and you are using babel version greater than or equal to 7, then add support for class properties syntax using:

npm install --save-dev @babel/plugin-proposal-class-properties

Also add, @babel/plugin-proposal-class-properties to plugins array in .babelrc file as shown below

{
 "plugins": ["@babel/plugin-proposal-class-properties"]
}

And you are ready to work with this new syntax.

  • If you are using your own webpack setup and you are using babel version less than 7, install it using:
npm install --save-dev babel-plugin-transform-class-properties

Also add, transform-class-properties to plugins array in .babelrc file as shown below

{
 "plugins": ["transform-class-properties"]
}

That’s it for today. Hope you learned something new today.

I hope you've been enjoying my articles and tutorials I've been writing. If you found them useful, consider buying me a coffee! I would really appreciate it.

Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.

Did you find this article valuable?

Support Yogesh Chavan by becoming a sponsor. Any amount is appreciated!