React’s setState function

When learning how to use Javascript’s React framework, you will quickly come across the setState function. Understanding how this function works is vital to learning React and then building apps with it.

According to the React documentation, setState is a function that enqueues changes to the component state and allows React to re-render information with the updated state. This is the main method of updating user interfaces in response to event handlers and server responses.

However, it is important to understand that setState works asynchronously. As a result, multiple processes will occur at the same time your setState function is being utilized. This is a means of increasing the perceived performance of a web application as it allows other easier-to-load aspects of a web application to be loaded before other portions of a web application. With regards to setState, it means that your state changes are not guaranteed to be applied immediately.

Because of this, reading this.state after calling setState() may not give you the information you expect. However, if you check in the documentation, you will find methods that are guaranteed to fire after an update has been applied. These methods are beyond the scope of this blog but can be found here: https://reactjs.org/docs/react-component.html#setstate.

Here is an example of how setState works. Let’s say we have the following state:

and let’s say we want to update hasBeenPurchased to true. In order to do this you would use setState with the following syntax:

What’s happening here is that the statement “this” is referring to the object which is currently executing in the particular section of Javascript code that you are in. After the this keyword, you chain setState on the end so as to specify that you want to set the new state to have at least one value that is different from before. Keep in mind that this is a shallow merge. This means that the hasBeenPurchased key/value pair is being updated independently of the others and consequently, the other variables will stay intact while only the hasBeenPurchased value will be updated.

As an aside, “this” is something that is commonly seen in object oriented Javascript. Therefore, it would be best if you spent time understanding the “this” keyword before reading on if you are unfamiliar with this particular keyword.

Anyway, let’s say we only want the state to update if somebody clicks on a button on your webpage. To do that, you would create a method to handle the onClick event and then include setState within like so:

This is a basic example of how to utilize setState. If working with a nested object the syntax becomes slightly more complicated. For example, if you had an object within an object, you would also include the outer key that points to the object you want to update.

In this blog I covered the basics of setState. I hope this information will be useful to you in your journey to mastering React.