useState() - What is it?
React has different hooks that you can use while coding. One of these hooks is useState(). useState() gives you the opportunity to take a variable that you would like to change and preserve the current state to manipulate it in a function.
Tips & An Example:
In order to follow along easily it is recommended that you name the state variables in a way that identifies what you are working with. useState() also needs an initial state which you set in the parenthesis. In the example below we are working with the "name" of something, specifically we are working with the text that the user would type in the “name” input field. For this reason we name the variables for useState() as “name” and “setName”. Since we also know that the user will be typing a string value we actually set the initial state as empty quotes because we know that initially the input field will be empty, but will be used to evaluate a string value.
Quick Analogy
Before we move onto the rest of the explanation, I want to use an analogy that helped me understand useState() in React. When trying to conceptualize useState() I initially felt like my brain was blowing up 🤯 .
However, the more I started working with useState() I started to embrace the chaotic feel of it being somewhat like traveling through time. I started thinking about how whenever I used useState() it felt like I was bracing myself for a ride through time. Specifically I started thinking about the Squidward in the time machine episode.
If you’re new to useState(), then I want you to think of yourself as Squidward as if you were traveling through time whenever you use useState().
...back to our example!
Maybe you’re asking yourself, how? Let’s step back into the example of “name”. In this example we have a form that will be submitted by the user once they click on the "Travel Through Time!" button. Upon submission we will be evaluating the string they have typed into the input box. Therefore, in order to register that change, we write a function that will know what to do with the change that will be occurring in the “name” input field. The function is labeled accordingly and can be referenced below. As you can see the parameter the function is taking in is an event (the submission) and upon the submission we will get the value of the input field.
Since the user is inputting the string of information that we want to set as our "name" so that it can display on our browser, we will use “setName” as a way to essentially set the (future) current state of “name”. In this case I say (future) in parenthesis because before the form is submitted the state of “name” won’t be reflecting the e.target.value– it will only become that after the submission. So now that we used the "setName" to take in e.target.value, then the next time we use “name” we will have whatever was input into “e.target.value”. For example, if we console.log(name) after typing "bob" in the name input field and we click submit, we can see below that the variable "name" now is set to "bob" because that is what was our "e.target.value".
Another way to make sure our setter function is operating correctly and updating the state of "name" is by tracking the state as you are typing. In the image below, you can see that as the user types in the name input field the state is updating to whatever is in the name input field.
What happens if don't use the setter function?
It’s important to remember that you can only use the setter function to actually make the changes you want to the current state. So for example, if we typed name(e.target.value) in our code instead, the state would not be updated and therefore the code would not work. If we try to type our developer tools would display an error message stating that "name" is not a function and therefore cannot take in the parameter of "e.target.value".
In this example of code, we also set the value of our input field as "name" the input field would not let us type. It wouldn’t allow us to type because there is no way to update the state of “name” without the setter function. Thus, the input field would stay stagnant and unchangeable.
So, how does Squidward fit into this again?
Back to the Squidward time traveling analogy, I think about useState() as a way to take the current state (or value) of something and change it in a way so that in the future it can represent something different. Think of useState() as the elevator that Squidward gets on. Which then allows him to be exposed to the different phases of SpongeBob. The era handle that Squidward turns would be the event that is happening.
The initial state of useState() would be SpongeBob as his current self.
The kind of “SpongeBob” we would get would depend on the value of the event which we will get depending on the event (the era handle). The initial state of “SpongeBob” would change based on the time period (our e.target.value) the era handle (the event) lands on. If the value of the time period is the past then we would get Caveman SpongeBob.
However, if the value of the time period is the future we would get FutureBob.
Regardless of what era the handle lands on, there will be a change of the initial state and we will either get Caveman SpongeBob or future SpongeBob. The previous state of SpongeBob before the elevator era handle (the initial state) would be the regular SpongeBob that Squidward knows (and loves).
Keep Learning!
The analogy can be a bit extreme, but if you are someone who thinks visually like me, it may help you to visualize something. This connection allowed me to really picture what was happening and how to use useState() as a whole. If this analogy isn’t as helpful, I end this blog post with the wise words of a friend of mine who said that he likes to think about the setter function as “const variableName = ". This shorter way of explaining gets straight to the point, that when you use the setter function you are updating the previous value of the state. Whatever gets you to continue to code along and get more comfortable with useState() is what you should refer to as you continue your coding journey!
Top comments (0)