Learn React Hooks: useState & useEffect - Simply Explained!

what's up guys there is cause in here and welcome to my react tutorial and this one we're gonna take a look at two very important hooks in react you state and use effect we're gonna explain both of them very clearly and very simply and by the end of this video you'll have everything you need to know to start using them in your projects so let's get to it alright guys welcome to the you state and use effect simply explained tutorial I have here a demo app which is built using create react app so it's nothing too fancy you should be very familiar it's for demo purposes we have the code here of the project and let's start using you state and use effect we're gonna start with you state what is you state and why do you use it well if you know when you react you can have state in your class components you can construct the components with state and then you can use that state to display information inside of the render function and you can manipulate the state with certain functions you use this that's that state the problem was that you couldn't do this with the functional component a functional component such as this cons app you could never have stayed until react Hookes until react 16.8 and this is where you state and use effect came into play so now what we're going to do is we're going to use this function under them or how you state works how you can put state inside of your functional components so the first thing we want to do is we want to import you state from react now the syntax for this is first you want to import react as you usually do for any component and then you want to do comma and then a named import use state and when I save it's going to auto format this is where you get your new States from react then what you want to do is let's think about the best way to illustrate this I'm going to use a counter example because that is very simple it's very straightforward and it's the best way for you to understand how to display the state how to update the state we're going to increment the counter and decrement the counter so first let's remove all of this stuff that we don't actually need and let's create our counter variables so a new state first you want to declare a constant so Const and then you want to open it tuple and you want to do the first element of the tuple is always going to be state variables so in our case it's going to be kept this is how we're going to use this variable inside of our return function to actually display the count number and then you wanna do comma and the second element is going to be the function that manipulates the count so in that case we're gonna call it set count now you don't have to write them like this you can have these variables be named whatever you want by convention it's a lot easier to have just your variable name defined here and then you have set variable name whatever that is as your function that is just good practice to do it for us to recommend it you should always do this it keeps it very simple very clean and then what we want to do is when I do equals use state and then open parenthesis and here we want to give a default of value to our count variable so this variable should when the component first renders it should render within default values so in our case we're gonna give it zero and we're gonna do this so now this is perfect we have our component we have our state what we're going to then do is display it inside of our component by doing count and same in here now the advantage of doing it this way is you no longer have to do this dot count right this dot state dot count sorry for class components you can directly do count if your applications start to get really big with a lot of components a lot of moving parts this will come in very handy it'll make it just a little bit cleaner now if we if you switch over to our app we should see that account is now zero perfect so now we have stayed inside our application let's now start manipulating state let's increment this counter by one to do that I'm gonna do a very simple button button with an onclick function that will do and click do it this syntax set count count plus 1 close the button and then do increment you could do it this way of course you can also create your own function that is const increment and then you would do set count count plus one and then pass instead of this past the functional reference to increment like this you could do it either way we'll do it the first way it's a lot I like it better and now if you refresh we'll have a button that when we click this button it'll set the count to count plus one count here being zero plus one being one so every time I click it it will increase the count by one perfect so now we have a manipulation of state that's very good now if I want to do another button by the way if you wanna when I'm using I'm using vim the vim plug-in I usually always use vim it allows me to be a lot faster in my code unit go for it to check it out now instead of set count count plus one here we're gonna do count to minus 1 and then be correct refresh will have two buttons increment decrement increment decrement perfect this is how use state works now you have stateful components inside of functional components that is very great so let's say that instead of having this state start at zero let's say that we want to pretend that we are calling an API we're not actually gonna call an API but the response of that API should increment the count by one and we want this to do when the component mounts if you've used class components before then you know of component did mount well use effect is a replacement for a component that mount and the great thing is it does component and component did update and component will unmount in one single function and that is beautiful so the first thing we're going to do is we're going to import use effect from react we will remove these two buttons for now because we don't need them we just want the count and here's what we're going to do we're gonna do let's make more space here just so to keep it clean use effect we're gonna open the function open an arrow function and then here we're gonna do set count count plus one and then we'll close put the brackets there so what this is going to do this acts as component did mount and component it update and pointed at unmount all at once but this is gonna do and I'm gonna show you the we're missing something here but this is going to set the count every time this component renders so when this come on the rounds when this component updates if I press save and look at it it's constantly increasing the count which is not something that we want we wanted to do it just once because we tried to emulate component did mount so first of all let's comment this out save it so we don't do anything to our count it resets the zero what you want to do is let's uncomment it now before saving use effect always takes in an array of dependencies right here this will tell you effect to only run when something in this array of dependencies changes so if I was to put count you this use effect will only run if count changes if I save it what do you think is gonna happen the same thing happens here again the reason being is that we're setting the count first the count is now count plus one this count is being updated which means that this count is updated because it's the same variable which is gonna cause this use effect to keep on we rendering we don't want this instead what we want to do is just pass an empty array of dependencies this means that use effect has nothing to change nothing will ever change in this component so use effect will only run once one we should now see is the count should no longer be zero it should be one and you see here we know how one so that is how use effect works for a component amount now we've seen that if you are to put count here we will get something like component that update right returns every time this component updates but we don't want to put count when instead of what we could do is we could do Const second count and then set second count equals use state and in this one what we'll do is we'll use one just so that we know that it's different and here what we want to do is we want to add a button again button on click nor this to set the second counter set second count second count plus one cause the button increment increment second then here we want to display or win us put a dash so we have some visual separation second count I misspelled it second count we want to and then before saving instead of passing count here we want to pass second count now if we save what this is gonna do this use effect will only run when second count is updated which is great because we can update the second count here the only time when second count is going to be updated is when we click this button it doesn't care about count but when second count is updated it's going to change the initial count but the initial count changing will not cause this use effect to re-render to rerun because it's not in one of the array dependencies so let's see what this is going to do we have one one so when I increment ii what's gonna end what's gonna happen is it will increment our second count which is this one by one and actually let's use this let's put 5 so in our first count is going to be 6 and our second count is gonna be 1 6 because 5 and then plus 1 because this runs on component did not so 6 1 what's going to end up happy now I'm gonna click this this will increase to 2 and then it will cause the second count to be updated which will cause the use effect to be run which will set the initial account to plus 1 so that means 7 so I do this will have 7 and to an increase in will have 8 + 3 9 + 4 10 and 5 and so on that is how you could control this use effect to only run on the instances and the times that you want it to run okay and now the last part let's use use effect to actually run something on component will unmount which is also something very useful so what I'm going to do is I am going to remove this you effect here I'm going to remove it from the table dependencies because we don't need it I am going to remove this second count I'm going to remove this count I'm going to remove this and what we'll do here is well we want to create a component and unmount the component as well so we need a different component luckily I have this test component here which we will be using it's actually called other component but that is totally fine I can rename this file just so it's consistent so we have this other component what we'll do is we will import other component from other component and then we will render it here and then instead of we want to create first of all let's just not provide an on click to this button and let you just do height height component let's see what pops up so we have height component and other component if we do this this of course does nothing so we have to provide an onclick handler for this function so we'll create a piece of state Const show component and then set the show component use state instead of zero now we're gonna say true because we want our component to initially be shown to initially be rendered and then we want to do is we're gonna replace this with show component and our component and save this so this component if you don't know JavaScript location this means when show component is true and this will always be true when both of these are true then render this so it's gonna render the other component if show component is false this will equate the false one nothing will be rendered this is good because now when we click hide component we can add an on-click function that will do set show component false so when we click this we will hide this couple it's less to set up my component component is gone right it disappears let's add just for good measure and let's add a button that will show the component so here we'll say true and then instead of high component we'll do show component don't do this and now show component will always show it hide will hide it show hide show hide great now the only thing we need to do is we need to use use effect on this component to do something when it unmount so we'll go to the other component we will react we will import use effect from react and we'll create a user fact use effect like this are a function and then first of all we'll do component console component in map and we'll pass in an empty array of dependency so we know that this will only run when component mount and then let's do this let's go back to our browser let's open the developer console you see here already component in mount because the component did melted if I was to hide it and show it again component in mount again hide it short again component it mount again cool so now we know that this works and use effect how you do unmount is you just return a function so we'll just return the function our function and then console.log component well unknown perfect now if we check this again show component component in mount hide component component well unmount show component mount on mount mount and mount you have component it mount component it update and component will unmount all of this functionality in one use affect function now this is great and this is why react hooks are the future we no longer have to use class components we can now use functional components and things are a lot better there a lot cleaner we can organize code a lot better and this in my opinion is a very efficient way of manage your local component state so guys this was the tutorial on how to use you state and how to use use effect I hope that it was very useful for you what I recommend you now do is you open up a project you start playing around with them you read the documentation because there's some specifics and some things that you want to learn about when you're using react hooks make sure to do that and play around with it and just get a feel for how this all works and try building some components on your own until you feel very comfortable to implement this in some of your projects and some of your working whatever you use react for so thank you guys so much for watching my name has been Darris cause and if you like these types of videos please make sure to subscribe down below because I will be making a lot of these react tutorials my name has been Darius Carson thank you so much once again for watching and I will see you all in the next tutorial ciao

Channel: Darius Cosden

Views: 31,407

Keywords: programming, ruby, c++, lisp, learn python, python programming, java update, software developer, computer programming, programmer, visual basic, learn to code, programming languages, fortran, python code, cracking the coding interview, c sharp, go language, programming for beginners, coding for beginners, coding classes, codeacademy, learn programming, learn code online, online code courses, coding courses

Id: iEVcCdbF1WQ

Length: 16min 28sec (988 seconds)

Published: Wed May 06 2020