React-useState Basics and Advanced?
With React 16.8, we don’t have to use “Class” based components anymore to use “state”. There is a new way to manage the “state” of a component. “this.setState” is replaced with “useState” hook and it is awesome! So if you really know how to use it…
Like the older way (before React 16.8), “useState” triggers a re-render in a component. Thanks to that, we can update a component and its content, style, elements, and other things. This is how React works.
This is how its use
const [state, setState] = useState(initialState);setState(newState);
Does it always trigger re-render?
The most important feature of the “setState” function is that if the newly set value is the same as the previous 2 values, it doesn’t trigger re-render. So what does it mean? If you call the “setState” function twice with the same value, it triggers re-render but it doesn’t for 3rd time.
To see clearly what that means open the console and clear it. Then press the “Update” button and see the log. It re-renders twice for the same value but on 3rd time it doesn’t re-render. You can see that by following the “updating” log.
How to update the “state” properly?
Another thing to know is the “return value”. You should be careful while updating the state if you have a JSON or array in it. Because as we talked about before, “setState” doesn’t trigger re-render for the same value. You have to be sure about the new value is not the same value as the previous one. Since Javascript can’t tell the difference between a value and another value created from it. So, if you updated a JSON or array and you compared it with the previous one you will see they are the same. Because they actually are!
So if you pass a JSON or an array to the “setState” function you have to be sure about it is a “new” one.
Let’s check it on an example
In the “Wrong Way” component, if you press the “Increase” or “Decrease” button that will update the state but it won’t trigger a re-render. So we can’t see the new value on the page.
In the “Right Way” component, if you press the “Increase” or “Decrease” button that will update the state and it will trigger re-render. Because it updates the state with a “new” object and React can catch this change and decide to trigger a re-render. So we can see the new value on the page.
How to update the “state” rapidly?
In most cases, you probably used the “setState” function simple like “this.setState(newState)”. But it has more… You could set the new state by using the previous one.
this.setState(previousState => ({...previousState, ...newState });“useState” hook has the same feature!
setState(previousState => ({ ...previousState, ...newState });Without that, even making a simple counter component would be impossible! Most of the developers new to React may not know this feature and they probably ran into a lot of problems.
Let’s see the common mistake and the right way.
In this example, if you press the “push” or “pop” button rapidly you will see the array is not updated properly. Because “push” and “pop” functions don’t update the latest state.
In this example, if you press the “push” or “pop” button rapidly you will see the array is updated properly. Because “push and “pop” functions update the latest state!
To sum up, the “setState” function is not the single feature of React but it is the most important one! So, you should really know how it works.
Please let me know your thoughts about the article or if you learned something you didn’t know before. Have a nice coding 🤗
