Learn useState React Hook in 15 Minutes | React Hooks Tutorial for Beginners

hey guys welcome back to another video so i'm starting a mini series on react hooks as react hoax very important topic if you are learning react or already a react developer also i have seen a lot of developers have really hard time when they start using react hooks in their projects so in this video we will learn everything about use state which is one of the most useful react hook with different examples so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] right guys so i have already created the react application so if you want to bootstrap the react app you can actually use the npx create react app and i'm running the application on the local environment so you can use npm start to run the application on the development environment so i have removed all the unwanted files which i don't want for this video and i have kept it very simple so this is our app component and inside the app component i'm just printing the hello so we can see the hello here so the react hooks are the special functions which you can hook in the react features so previously we used to create the class component in order to use the states but with the help of the u state react hook we can actually use the state in our function component without converting the function component into the class component and that's the beauty the power of the react hooks are so let's start with the very basic so i'm going to create a variable let a and i'm going to give a value as the page and i will create a button here so on click of this button i'm going to name a function so this will be the change name and i will reference the variable here a all right and we need to define the function so i'm going to do the function change name and this will actually change the value of a so i'm going to change the value of the page to nikkei and i'm going to return the a all right and let's also do a console log so i'm going to do a console log of clicked so this will become clicked and i made a little mistake here so i'm going to do this all right and now if i let me add the content in the click button so this will become click me all right and now if i click on it you will see that the value of the page doesn't changes to the nikkei and if we go to the inspect element and in the cons so you can actually see the button is clicked but the value is not changing and that is because the component is not getting re-rendered when the value of a is getting changed so we will use the use state so whenever in the use state the value of the state changes the components get re-rendered automatically and to use the use state we just need to add the use state and this is going to give us the u-state react hook to be used in our app component so i will just comment this out for now and in order to create the state you will use simply the use state function but to make the use of the use state function there are certain rules and you need to follow those rules while using the use state you cannot use a use state in a conditional basis so if i make a condition of if true then i need to make use of use state and if i save it then you will see that react gives us an error that you cannot use the use state conditionally also you cannot use the use state inside the functions or inside the conditional rendering so the use state always should be called in the exact order it is defined and it's a good practice to keep the use taste always on the top so whenever we define the use state it actually returns two things so if i do a console.log of this use state then we will see that it returns two things the first one is okay so let me uncomment this again all right so now we can see that in the console log it always returns two things the first one is the current state and the second one is the function where you can actually update the state so let me define this a in the form of a use state so i'm going to write a constant and we are going to do a destructuring of array and we can define any names we can give the any name so first i will give the name and the second value will be the function name so i'm going to give the set name and this will be equals to the use state and inside this you can actually give the initial value which you want so i want the initial value to be the page all right and now we can actually reference this name so i'm going to change this to name here and i'm going to remove this and instead of this i am going to return so now i want to update the state whenever i click on the button so to update the state you can actually use the set state and inside this you can actually give your new state so my new value will be nikesh and i'm going to remove this all right now if i save it let me remove this also we don't want and now if i save it then you will see that if i click me then the value gets changes because whenever the value of the state changes the components gets re-rendered and that is what the react is you need to re-render the component whenever the value changes so for that we use the use state let's take an another example for the use state so i'm going to this time take a boolean so i'm going to add a flag and i'm going to change this as set flag and i want the initial value to be the false so you can use the values in the use state usually you will use four values either you will use a string directly or you are going to use a boolean or you will use an array or an object so we are going to see all the four examples and what we will do is i am going to change the set state here so this state will become flag and i will make whatever the state is i'm just going to alter the state all right so we are going to do a conditional rendering so if we have a flag value as true then it will print the name and if it's false then it's going to print the empty so now initially the value is false so when this flag is false it doesn't going to print the name but when this flag becomes true it's going to print the name so if i click on it it will change this to the page if i again click on it it will get hide so this is how you can actually use the boolean in the use state the next example we are going to see is how we can actually use the use state in numbers so if we want to use it in the numbers i will do it as steps here and this will become set steps and i will add the initial value as let's add at zero all right and we will add something to display here so i'm going to add and horizontal all right and let's copy this and add it here so i'm going to add this becomes the increment i'm going to change this to plus let's copy this again and i'm going to change this to decrement so this will become decrement and here i am just going to print the state so our state is steps all right and i'm going to copy this and i'm going to cut it and i'm going to add it here all right so we have added and now we need to define the two functions the increment and the decrement so i'm going to add two functions and this will become increment and let's change this to decrement and when we actually click on it we need to change the state so the state will be we can change it via set steps and inside the set steps whatever the steps value is i just need to add one here there and here whatever the steps value is i just need to decrement by one all right and now if i save it we made some type post so this will become decrement all right and now we can see that we have the increment in the decrement if i click on the plus it will change the value to one if i click on it it will change the value too so when i click on the minus it's not changing because i made a typo here so it will become steps all right and if i click on it then it will decrement but we can do one more thing here and that is called the prev state which is the previous state so what actually is happening here that it's taking the state which is the zero and it's going to increment it one and it will update the new state but if we want to run this set step twice so i want to copy this and i want to run this twice so that means if i click on the increment it should be incremented by two but if i click on it it's still going to increment by one and that is because it's always going to take the value of the steps and it's going to increment by one and here also it's going to take the value of step and increment by one but in both the cases the value of the step will be the same so what we can do here is we can actually use the previous state and to use the previous state i'm going to change this to a arrow function and i will add this previous state so it's going to give me whatever the value of the previous state is all right and let me change this as well for the previous state so i'm just going to copy this and i'm going to add it all right and now if we see that if i click on the plus icon it's actually going to increment by two numbers so if it's five then it goes to seven if it's seven it goes to nine so that is where when you actually deal with the numbers in the state you can actually use the pref state in order to make use of the previous state all right so the next example i want to show you is the uh how you can use the use state for the array and objects so what i'm going to do i'm just going to copy this and i'm going to add it here and i'm going to make a list of names and this can be changed to set names so it's not mandatory that if i'm using names here that's why i'm using a set names here i can actually use directly the set state as well so you can give any name but it's always a good convention that you understand that whatever the value here is name of the state you actually going to update the same name of the state all right and this will become an empty array okay and we need to add some jsx so i'm going to copy this and i'm going to add this here all right and below i'm going to create a simple form and inside the form i'm going to add an input with a type of text and i'm going to add the value and the value will be the name so we have already have the state of name so we are going to use the same name and then i'm going to add a placeholder this will give me add names and then on change we can add a function and i'm going to add an arrow function which is going to give me an event and inside the event i'm going to use the set state and the value will be event dot target dot value whatever the new value is i want to update it with the new value okay so now on form submit we will actually write a submit event and on submit we need to have simple add names names okay and we are going to create a button which will actually be adding the names so i'm going to add the button here and i will remove this so we have already returned the on submit so i'm going to just write a submit here all right and now let's go and write the name function so add name function so i'm going to write a function with add names and this function is going to have an event and inside the event what we need to do we actually need to add the name to the state which is the set names so whenever you deal with the arrays or the objects you always need to be careful because you cannot update directly so let me show you if we write the even dot prevent default so that the page doesn't get refreshed so now you cannot add directly the set names so you want to update the state and this is actually an array so you should not directly use names dot push and then you push the new value suppose the new value is let's give the id as names dot length and we will give the name as name all right and so the name and the id is same so we will can remove this and the es6 all right so this is a bad practice you should not update the states directly with the push or if it's an object then you should not directly do the i will just copy this and i'm going to remove this and in the object you just need to update the name and not the id so you should never do like you just adding the name here and you will add the name so this is a bad practice so how you can actually update the states in case of the array or the objects so let me show you you will remove this so first we need to take all the values which are already in this state so i'm going to write names and after that i can actually add the id so i'm going to add the id as names dot length and i'm going to add the name as name and since we are using the es6 so i'm going to remove this all right so now we have set the name and then i need to make this input box empty for that let's make the set name as empty so i'm going to add as here as empty all right so now we have added it and if i click on the submit then it's get added so if you want to see the list of the names then i can simply just do a simple copy paste of my code now if i save it then we will be able to see the name if i want to add a new name i can add nikkei and it will get if i want to add a myth and it will get the edit so this is how you can actually make use of the use state with the array and the last thing i want to show you that whenever your components get re-rendered your used it function is called but there is a case that you are having you need to set an initial value which will be set after doing a heavy operations so you're going to make some heavy operations like you're going to make some api calls and you will get the data and after receiving the data you are going to set the state then in that case whenever the component re-renders it will every time it will going to call or do all the heavy operation and then it's going to set the state so in such cases your application will slow down so you can do one more thing actually you can use here a function and inside this function you can do a console.log and i'm going to add a clicked here and then you can actually return the value as zero all right and now in this case you will see that the use state function will be called only once so if i go and inspect it and if i go to the console then you will see that if i refresh it then the click is only clicked once and if i click on it it's not getting called again so this function will be called only once so you can use this in a cases where you need to have a heavy operation and then you set the initial value and i can demonstrate this so let me create one more function so i'm going to create a function and i'm going to set the initial value and this initial value will be i'm going to write a console.log and inside this i'm going to write as function called and this will going to return the value as 0. all right and now let's use this initial function to this function so i'm going to remove this and i'm going to add the initial value here as all right and now you see that if i click then every time the function gets called so that's why if your initial value is coming from an heavy operation then you should always use a function here and then you set the initial value so that's all you need to know about the use state you are good to go so that's all i have in this video so next we are going to explore the use effect in the next video so if you like this video a thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter for latest updates before you go don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one and thank you thanks for watching

Channel: Dipesh Malvia

Views: 7,575

Rating: 4.9846153 out of 5

Keywords: react hooks for beginners, learn useState in 15 minutes, usestate with object, reactjs, react hooks tutorial, javascript libraries, usestate hook in react js, reactjs setstate, react hooks, react, reactjs usestate, usestate tutorial, react usestate js, learn react usestate, learn react hooks, usestate react, usestate hook, react hooks project

Id: P24EuJlVKb0

Length: 17min 19sec (1039 seconds)

Published: Fri Feb 19 2021