Simplify your React code using shorter ES6 setState syntax

A simple and Shorter way of writing setState calls

Photo by Fernando Hernandez on Unsplash

In this article, we will see how we can use the new ES6 shorter syntax which will make the setState call a lot simpler. So Let’s start with some background knowledge.

Take a look at below arrow function.

// Example 1
const getName = () => {
 return "David";
}

The above arrow function has just a single line of code inside it. If there is a single line of code in the arrow function, we can implicitly return it without adding the return keyword so we can make the above code shorter as below

// Example 2
const getName = () => "David";

Example 1 and Example 2 will produce the exact same output. Example 2 is just a shorter syntax of Example 1.

As you know if we have more than one line of code inside the function, we write those statements inside the curly brackets ({}) and we explicitly specify the return statement.

If we are returning an object from a function we write it as

const getObject = () => {
 return {
  name: "David",
  age: 30
 };
};

We can simplify the above code as

const getObject = () => ({
 name: "David",
 age: 30
});

Here we are directly adding the object inside the round brackets ( ) which will implicitly return the object without the need for a return statement.

Now let's see how we can use this in the setState call.

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

If you are wondering how the state is written directly inside the component and not in the constructor and why there is no .bind function call added for the event listener, check out my previous article HERE which explains it in detail.

Take a look at the setState method inside the handleAddOne method in the above code

this.setState(prevState => {
 return {
  counter: prevState.counter + 1
 };
});

As you can see, this single setState call takes almost five lines of code. It’s also easy to forget adding the return keyword like

// without return keyword
this.setState(prevState => {
 {
  counter: prevState.counter + 1
 };
});

The above setState call of without return keyword will not throw any error even if you missed the return statement but it will not work as expected. So to overcome these issues, We can simplify it as

this.setState(prevState => ({
 counter: prevState.counter + 1
}));

Now it looks shorter.

We can further shorten it, as there is a single statement in the function

this.setState(prevState => ({ counter: prevState.counter + 1 }) );

Wow, we have converted the setState call from five lines to just one line.

It’s perfectly ok to keep it on more than one line, if there is more than one state property we need to set like

this.setState(prevState => ({
  counter: prevState.counter + 1,
  name: 'Jane'
 })
);

Now, Suppose we have an array of numbers in the state and we want to delete all the elements of the array, we use the following setState call

this.setState(() => {
 return {
  numbers: []
 }
});

As always, We can simplify it as

this.setState(() => ({ numbers: [] }) );

To use this shorter syntax of returning an object, there is no need for any configuration changes or any installation. It’s ES6 syntax so it's available by default in create-react-app.

Check out my recently published Mastering Redux course.

In this course, you will build 3 apps along with a food ordering app and you’ll learn:

• Basic and advanced Redux
• How to manage the complex state of array and objects
• How to use multiple reducers to manage complex redux state
• How to debug Redux application
• How to use Redux in React using react-redux library to make your app reactive.
• How to use redux-thunk library to handle async API calls and much more

and then finally we’ll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.

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