Tips to Improve Your React Code

Use these tips to save time and make your code more concise.

Having worked with React for a few years, I have come to recognize a few tips that can not only save a lot of time but also project a level of expertise if used properly. In this article, I will try to highlight a few of them and try my best to give a detailed explanation of how they work.

Use Object Destructuring to extract props.

Object Destructuring is a useful JavaScript feature to extract properties from objects and bind them to variables.

For example, if you have an object defined as followed:

We can extract the firstName and lastName properties from the object like so:

Using this JavaScript feature, we can improve a common React JS use case:

Let’s say we have a ChildComponent called as such:

Instead of receiving the properties like this:

you can instead, use Object Destructuring to improve the code as such:

Combine the Spread Operator with Object Destructuring to pass additional props from the Parent Component to the Child Component.

Often you’ll need to pass some properties from the parent to the child; like onClick or the class name. This can be achieved by combining both the JavaScript Spread Operator and Object Destructuring.

For example, if we are passing additional properties to the ChildComponent from the parent like so:

You can pass the props to the outer container of the child like so:

I hope these tips can save you some more minutes or lines of code since these are two of the more commons operations you’d be making as a React Developer.
Happy Coding :)

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.