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.
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 shown 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 this article 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.
This shorter syntax is common nowadays. You will find it used in almost all the applications that return an object.
That’s it about this article. 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.