ReactJS|State

In the previous article on ReactJS|Props  we have talked about What are props? Now What if we want to manage some data inside the component that may change over time. To achieve this React comes with State. Now, what is state? In this article, we will talk about react state in greater detail.

What is State?

• State is a javascript object that holds some private information specific to the component that may change over the lifetime of the component.
• State is what allows you to create components that are dynamic and interactive.
• It is mostly used to update the component when user performed some action like clicking button, typing some text, pressing some key, etc.
• It is managed within a class component only.

Difference between Props and State

We have already learned about Props and we got to know that both are plain JavaScript objects and both hold information that influences the output of render but they are different in the following way:

• Props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).
• Props are immutable i.e. once set the props cannot be changed, while State is an observable object that is to be used to hold data that may change over time and component has full control to change the state.
• Props can be accessed using props in functional component and in class component props can be accessed using this.props. State, on the other hand, can be accessed using the useState hook in functional component and this.state in class component.
• While Props are set by the parent component, State is generally updated by event handlers.

Now we have learned the basics of State and are able to differentiate it from Props. Now all that is left is to know about how to work with state before implementing one for ourselves.

State is usually defined in the constructor of the component’s class with the default initial value. To define the state of any Class we can use the code format below :

• Inside the constructor firstly we must have to call the super method, this is required because we extend React Component class and a call has to be made to the parent class constructor.
• To use props outside the constructor we have to write this.props but to use props inside the constructor we must have to pass props as an argument to the constructor and super method.
• To define state inside the constructor assign this.state with the javascript object consist of data in key-value pairs with the default initial value.
• The only place where you can assign this.state is the constructor of the component and to change the state object, react provides its own method setState().setState() schedules an update to a component’s state object. When state changes, the component responds by re-rendering.

Let’s take a look at simple example demonstrating the working of state in react :

In the above example when we click on the increment button the incrementCount method will call and inside it, we are calling setState method. This method accepts an object which is nothing but the new state of the component. In the new state, we are incrementing the count property value by one.

Do’s and Don’t with state and setState

Given below is the generated output after executing the above code:

In the above output when we click on increment button the value of count in the UI changes from 0 to 1 and in the console we have a value of 0 and callback value of one. Zero is from the synchronous console.log statement and 1 is from callback function console.log statement.

Let’s take a look at the next scenario when we will try to use the current state to calculate the new state. The above code is working as expected and the increment is working fine. This is because the current scenario is pretty simple. Let’s make the scenario slightly complicated :

So now the count should increment from 0 to 3 when we click on the increment button.

In the above output when we click on increment button the value changes to 1 instead of changing to 3 and in the console zero is logged three times and even the callback value of one is logged three times. This behavior is because react may group multiple setState calls into a single update for better performance.So what happens in our scenario is that all the three setState calls are done in one single go and the updated value does not carry over between the different calls.

When you have to update state based on the previous state value, pass in a function as an argument instead of a regular object.

To fix it, use a second form of setState that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props object as the second argument. So whenever you want to update the state based on the previous state we need to pass the function as the argument to setState method instead of passing in an object.

Now we are going to use the previous state instead of the current state.

Given below is the generated output after executing the above code:

In the above output when we click on the button the value of count displayed as three. When we click again the count will change to six in the UI. Now we are able to correctly render the UI based on the state.

The second parameter passed to the updater function is the props object so if your new state depends on props object as well, you can go with the function parameter approach and make use of props.