An Overview of what we're going to cover
In this blog, we'll try to simplify and understand what Hooks are and then dive deep into understanding the State Hook, and how to implement it in your web app. Along the way, we would also understand what a CodeSandbox is and how to use it. So let's get started!
Prerequisite
Before we go deeper into this blog, here's the prerequisite to make the most out of it. Readers should have a basic understanding of JavaScript, related VanillaJS concepts, and some understanding of how React works.
What are Hooks and when do we use them
Hooks are functions that let us “hook into” React state and lifecycle features from function components. They basically let us use more of React's features without classes, which is why they're so popular. React provides some built-in Hooks and useState is one of them which is also called the State Hook.
Implementing the State Hook in your Web App
We'll create a simple web app where we would be taking input from the user and render it or show the output in view using the State Hook. To do so, we'll set up our dev environment in CodeSandbox. CodeSandbox is basically VSCode on the cloud. To implement a React app on VSCode, we would have to install a lot of dependencies which can be avoided as it's all taken care of by CodeSandbox. When you click on CodeSandbox, click on 'New Sandbox' and then click on 'React by CodeSandbox' as shown below:
Once you've clicked on that, your sandbox would open as shown below. Let's name it to 'use-state-react'.
We'll start writing our code in the 'App.js' file and the white space we see on the right side is what our web app would look like.
Taking input and calling a function
We first change the heading 'h1' to The State Hook and remove 'h2'. You could name it to anything you want. Now below the heading, we create an 'input' field using the input tag for users to put in their info as shown below:
Once we've created the input field, we want to read whatever the users would put in there. To do so, we use the onChange event Handler. And whatever we want to do with that input, we mention that in a function as shown below:
Please note, onChange is a JSX attribute. To read more about JSX, click here.
Now, we notice that as soon as we declare the function, a reference error is thrown which says that the function is not defined. Hence, we now go and define the function as follows:
Inside this function, we now need to read the input and store it in a variable. Hence, we declare a variable called 'input' and for reading the input value we write 'event.target.value.' Read more about Event.target here.
To check whether our app works or not, we first print the output in the console. The console is the best place to test your app.
Now as soon as we type something in the input field, it appears in the console as follows, and confirms the fact that our app is working fine.
Importing the State Hook and implementing it in the App
Now, we don't want the output to appear in the console - we want it to appear in the view. To do that, we use the useState Hook. We need to first import 'useState' from React.
We call 'useState' inside a function component to add some local state to it, in this case, the function is 'inputChangeHandler'. You could name the function anything. 'useState' returns a pair of values, however, functions in JavaScript can only return a single value. Hence, such functions either return an Object or an Array. This might feel a bit overwhelming, however, the more you read about it, the more comfortable you'll get.
The pair of values returned by 'useState' signify the current state value and the second value is a function that lets you update the current value. Basically 'input' holds the current input value put by the user and 'setInput' stores that value which can be updated whenever the input changes. Hence, you need to update 'setInput' every time the input has been changed. It is also called the Setter.
Now, we're almost done with the program. We just need to update or store the value of the input in 'SetInput' and then render or show the current value which is 'input' in the view or the app. We do that as follows:
As we can see, the input was stored in the 'setInput' function and then we rendered it below the input using the 'h2' tag. You could use any heading tag or even a div tag to render the output. As seen on the right-hand side, whatever we type in the input field - appears as output below it.
And just like that, we've learned to implement the State Hook in our web app.
I hope this blog added some value to your learning experience. I would love to hear your thoughts or any feedback in the comments below. Until next time!