The 3 masks of this.setState

To begin

Since the introduction of React Hooks on React 16.8 version the way we build features based on state management, prop drilling, event handling and a lot more has been changed. But doesn’t matter that all this new approaches came in a certain way to “replace” class based state management, a lot of open source, startup and business projects are still using the whole class based React environment and a lot of developers should actually maintain all this projects

We could spend the whole day arguing why we should start using react hooks in every project we build but that’s a discussion for other day, it’s quite important to consider that we still need to know how the entire library works and yes that includes the classic this.state and this.setState formula for built-in state management.

The First Mask 🎭

I’ll want to begin with the most common way to use this.setState, using just and object as a parameter and changing the initial state through attributes as we can see on the next example using a simple apple(s) increment button:

as you see we incorporate the this.setState into a method called toBasket, that will be integrated and called through the onClick event as you see bellow:

I know that’s a simple example but I will add the expected result bellow:

this is quite common and one of the first things to know and grab when we started to learn React, now let’s move to the interesting part.

The Second Mask 👺

Maybe you’re asking for: which other functionality offers this method?

Well imagine that you want to run a function that needs the updated state, if we execute a function that will use the new state this one will return the old state because the updated one takes effect just after rendering step. In this case this.setState provides the option to pass a function as an additional parameter that can access to the new state as you can see on the example bellow adding a console.log that show us the updated state’s value:

this console.log returns the old state because it’s executed before rendering step and when the Add more apples button it’s pressed we see that result projected in both DOM and console:

now if we use the second implementation (passing an anonymous function as a second parameter to this.setState) it will looks like this:

we obtain the same exact updated result on both console and DOM:

with this in mind it’s correct to say that this.setState it’s actually an asynchronous function and by the way the function used as a second parameter is considered a callback.

The Third Mask 👹

And last but not least there are a different and more efficient way to write this.setState and it’s called the functional way and this is quite simple to write, just need to replace the object component with a function that receives the state and could receive even a prop as parameters the only aspect to consider is that this.setState must return an object with the state changes as we see bellow:

this way of expressing this.setState returns the same expected state changes that the first one (just an object as a parameter way) just resulting into:

and we even could manage complex tasks considering that we have instantly access to props values, it’s recommended to implement this third way over the first one whenever is posible in order to avoid weird behaviors after or during the event lifecycle.

Here’s the end

We could consider a lot of things around this useful method like all the lifecycles specific methods or how the built-in state management functionality interacts with third party libraries and a lot more but this is just a practical and easy to grab tutorial just to really see the general capabilities of this.setState method at the end it’s important to have in mind that this method is not limited to receive just an object as a parameter.

I’ll hope you enjoyed this article and found it a little bit useful. I’m cooking a lot more useful content and you can track me on Twitter too, there I share useful notes and resources that could be useful or interesting for you. 😉🤘⚛️