React Hooks Tutorial - 2 - useState Hook

all right in this video let's start with the very first hook which is the state hook up until now if you started writing a functional component and then ran into a situation where you needed to add state you would have to convert the component to a class component that is simply because state could only be used in class components that is about to change because the state hook which we will learn in this video allows us to use state within functional components to understand how the state hook works we are going to take a look at a simple counter example and for the benefit of those who are learning hooks with the knowledge of class components I will start of the video by implementing the counter with a class component and then implement the same with functional components and the state hook if you are new to react and starting off with just hooks you don't have to worry about the class component implementation alright to get us started I have already created a project using create react app the first thing I'm going to do is in app dot chess get rid of the header and the logo import now we can get started with the code first up a counter using a class component in the source folder I'm going to create another folder called components within the folder I'm going to create a file called class counter dot j/s within this file we implement the class-based counter component I'm going to use the snippet RC e to create a class component and get rid of the named export next create a state variable called count and initialize it to zero after that create a method called increment count which increments the count value by one so this dot set state count is going to be this dot state dot count plus one in the render function for the JSX add a button on click of that button call the increment count method and for the inner text we display the count value count is going to be this dot state dot count finally in the app component include the class counter component if you now save the files and take a look at the browser we should have a button with count initialized to zero I click on the button and the count value increments pretty straightforward what I want you to keep in mind the three steps which are necessary to implement this counter the first step is to create a component and we have used a class component the second step is to create a state variable initialized to 0 the last step is to create a method that is capable of setting this state value with these three steps in mind let's see how to implement the same counter with a functional component and the state hook within the components folder I'm going to create a new file called hook counter yes and within the file I'm going to use the snippet RFC II to create a functional component as part of the JSX I'm going to add a button the button will have an onclick handler and also the count as the inner text we will fill them in shortly now back to our three steps necessary to implement the counter first step is to create a component we have already done that but this time we have created a functional component step two we need a state property initialized to zero and step three we need a method capable of setting that state property value since we are working with a functional component we cannot use state like we did before we need a different way to implement steps two and three and that is where the use State hook comes into picture if you remember a hook is just a special function that lets you hook into react features so you state is a hook that lets you add react state to functional components let's take a look at the code the begin by importing it from react so use state which is unnamed import now the question is how do we use it in our component well hooks are just functions so we simply call them use state this hook or function accepts an argument which is the initial value of the state property and returns the current value of the state property and a method that is capable of updating that state property and that sounds more complicated than it is so let me show you the code so you state accepts the initial value of the state variable which is 0 and returns a pair of values current value of the state variable which we are going to call as count and a method that can update the state variable which we are going to call as set count this syntax right here is called array restructuring which is a feature in es6 if you're unaware of what is added destructuring pause the video quickly read up on the topic and then resume shouldn't take you more than five minutes now the names count and set count are chosen so that it makes sense when you read the code but you can name them anything you want to could be number and set number or even completely random variable names like subscribe or enable notifications alright with this we basically have our step two and step three implemented a state variable count initialized to zero and a method set count capable of changing the count variable we can now use these variables in the JSX the innertext count is what we want to render and on click we call set count passing in the new count value and what is the new count value current count plus one and since this becomes a function call that's converted into an arrow function and that is pretty much it we have implemented all the three steps we have a functional component a state variable initialized to zero and we also have a method that is capable of updating the state variable back in app component let's comment out class counter and include the hook counter if you now save the files and take a look at the browser the counter works exactly like before so this is a basic example of how to use the state hook in react import you state call it passing in a default value assign the return pair of values to variables using a DD structuring and use them in the render function the variable count will always contain the current state value and set count will accept an argument and set count value to that argument and how does this work with our counter example well the very first time the component renders a state variable is created and initialized with the default value of 0 the default value is never used on re-renders when you click on the button the set count method is called which will add one to the current count value on first click count is incremented to one from zero after that the set count method will cost the component to rerender after the rerender count will contain a value of 1 which is then displayed as part of the inner text in the browser now if you're wondering why we would want to use this as opposed to class component and this dot state we already talked about that in the previous video now there are two important rules that you have to follow when using hooks and I just want to mention it here so that you're not going to try writing code in a way it isn't supposed to be the is that only called hooks at the top level use hooks at the top level of your react function and don't call hooks inside loops conditions or nested functions the second rule is only called hooks from react functions make sure you call them within react functional components and not just any regular JavaScript function though these rules are crucial to how hooks work so accept these rules for now we'll talk more about why we need to follow them later on in the series well with that we wind up our introduction and the first example on the state hook let's take a look at the next example in the next video thank you guys for watching don't forget to subscribe I'll see you guys in the next one

Channel: Codevolution

Views: 212,902

Rating: 4.9700274 out of 5

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Hooks, React Hooks Tutorial, ReactJS Hooks, React Tutorial for Beginners, ReactJS Tutorial for Beginners, useState, useState Hook

Id: lAW1Jmmr9hc

Length: 10min 45sec (645 seconds)

Published: Mon May 20 2019