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
Never modify the state directly.
Never modify the state directly instead make use of setState because when we modify the state directly react will not re-render the component. setState, on the other hand, will let react know it has to re-render the component. For example, if we update the state of any component like the following the webpage will not re-render itself.
Given below is the generated output when we execute the above code :
In the above output, you can see when we click on the increment button the value of count is not incremented in the UI but in the console, it has changed from 0 to 1.If we do few more clicks you can see its same 0 in the UI and increments in the console. What this means is that UI is not re-rendering whenever the state is changing and this is the main reason we should never modify the state directly.
React provides its own method setState(). setState() method takes a single parameter and expects an object which should contain the set of values to be updated. Once the update is done the method implicitly calls the render() method to repaint the page. Hence the correct method of updating the value of a state will be similar to the code below.
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 but in the console, the value is 0. So everytime when we click on button console value is one less than the rendered value and this is because calls to setState are asynchronous so what is going on is console.log is calling before the state is actually set.
Place the code in the callback method of setState which you want to execute after the state has been updated.
Calls to setState are asynchronous. So whenever you need to execute some code after the state has been changed then do not place that code right after the setState method. Instead, place that code within the componentDidUpdate or the callback method that is passed as the second argument to the setState method, either of which is guaranteed to fire after the update has been applied.
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.
I hope this article will help you in understanding the basics of state, how state is different from props and also the do’s and don’t while working with state and setState.Thank you.