Hi Developers! In my last blog, we talked about how to pass data between React Containers using Props. This is really helpful, but the only downside is that Props are read-only meaning that we can't change their original value. For that, we need something called State.
It is absolutely impossible to talk about React basics and not talk about States. I think you'll agree when I say that React props are a very important and interesting feature of the framework but very quickly you realize that you need something more. Especially because without states, your React components are simple templates.
But, what's a state? A state in React is a mutable data store of components that are also autonomous meaning that the state belongs to an autonomous class that anyone can import and use in their application. Props and states are both attributes of a class, so you can use this.state and / or this.pros, but they have different purposes: while properties are immutable, the values of the states can change. They are mutable. The values of the props are passed from parents to children and the values of the states are defined in the component, they do not start in the parent component, and you cannot call setState () in the render ().
A good example of how to use State could be a countdown. In a countdown, you would need the numbers to change every second. For that, you could not use a property because the value needs to change every second. You could also use the states in other situations where you need to make a request to the server to fetch the information you want to see on the screen, but you don't want other parts of your UI to update.
Using states, React intelligently updates the view for you, where it needs to be updated.
Now let's see State in action in our code:
I divided this code into three parts to have a better understanding of the steps you need to follow as you set your state.
1) We need to set our state in our class. Remember, to use state you would need to always use a class because setState is inherited from the base Component class. To set state you just need to call state and inside the curly braces create your object adding key:value pairs. The initial value can be pretty much anything: a string, number, array, etc.
state = {
name: "Anette"
} 2) In this example I created a function to call our setState. In this case, the state will be changed when the user clicks on our p tag. Updating states is as simple as declaring this.setState (data, callback). You just have to remember that React merges the data with the existing states and then calls render ().
setState() updates only the state you want. It doesn't always update the whole object. For example, if in an object you have different states, like the first name, last name, age and you only want to update the age, all you have to do is this.setState ({name: "Steven});. The other values will remain the same.
Also, keep in mind that setState () works asynchronously. State is not immediately available after calling setState (), that's why it's important to have the callback in setState (). It is a way of ensuring that the new state is available. FYI, changing the state without using setState () is considered anti-pattern so please, don't even think about that.
3) The way to access your state inside your code is using this.state.name . In this case, we assign our data using JSX syntax and that's why we using curly braces.
States allow your applications to be interactive and have dynamic information. At the same time, they are useful when you need to see the changes in the server's response to a request. I imagine that now you can see how helpful and necessary is states in our apps, right? React is pretty great!
Thank you for reading! :)
Top comments (0)