React Hooks Course - All React Hooks Explained

hey everyone how's it going i'm back here with another video and today i decided to bring this video where i'm going to be going over every single hook that is built into the core of react as you can see over here inside of the official react.js documentation they lay out a few of the hooks that already come with the library and to be more specific there are exactly 10 hooks which they consider to be as part of the core react.js system so what i decided is i decided to make this video where i'm going to be going over and explaining each one of these hooks so that if you for some reason um has never learned them in the past or you just need a refresher you can get the refresher by seeing me going over some very clear examples on which use cases and which situations each hook individually might be useful for i would like to point out that there are hooks which are more useful than others or to some extent more important than others however i believe it or not each one of the hooks here have a specific use case that you will encounter in the future as you grow in your react journey uh unless i would say that the least important one here would be the use debug value however it doesn't really matter i'll go over each one of them and explain everything and before we get into the video if you guys could leave a like and subscribe if you're not subscribed i would massively appreciate it this video is taking a long time for me to create because of the amount of research the amount of preparation that i've prepared previously so i would massively appreciate if you guys could leave a like it will help push my videos to more people and yeah that's that's basically it let's get into the tutorial [Music] [Applause] okay everyone so this is where the tutorials start and we are actually going to start by the simplest but most useful hook out there which is the use state hook i would like to point out before we begin the video that um all of the code for this and every single example is pushed into a repository in github and a link for that code base is in the description i separated each of the hooks and each of the examples that i go through by folders so if you want to like check out the code that i used for the use memo hook you can just go over to the folder named use memo and it is pretty well organized so if you want to check it out just go to the link in the description and you can do so there but over here let's start by talking about the use state hook so one of the things that is very important to understand is that that react has this very clear notion of the state of the application so differently from when you code with vanilla javascript react you don't need to actually manually grab some html elements to change the values and update the values in the web page so for example if i wanted to update this value over here to something else in normal vanilla javascript i would have to do something like grabbing the the value of this specific div or this specific html element and then manually changing its value to something else which it's kind of boring that's one of the the annoying things about coding in vanilla javascript and one of the benefits of react is that it does it for you if you determine some sort of system to manage the state of the application and when i say state i mean the whole thing i mean the ui i mean the logic i mean the variables everything and one of the important things that react created was this idea of changing the state of the application and as you change the state of the application the web page in itself will re-render automatically to show the new values and the use state hook is one of the most clear examples that exemplifies this because it is extremely useful for many situations and in order to explain it i wanted to show you guys a very very common example you used for the use state hook it is one of the like the easiest examples to use to explain because it is very simple and it's very clear um that like the use case in this exact scenario i'm going to be building a very simple counter app which will have a button and as you click on the button it will increment a number and what we should see is the number in the screen in our web page should be incrementing as well as we click on the button so imagine we don't know what the use state hook is right and we want to build this kind of application well we would imagine that we would create here a variable called um counter and set it equal to zero and then what we might want to do is have some sort of i don't know it had the variable over here being displayed by saying that we want to render the counter inside of this div if we save this you see that the number is zero which is pretty good right um it's exactly what we want and if we change this to one and we save it it should be 1 as well and what we want to do now is we want to be able to add a button over here which when we click on this button we want to increment the value i'm going to save this so you guys can see it but basically this is the idea as we click on this button we want to see this number incrementing on its own so you would imagine that the the way to do this is you can just pass over here a very simple on click which we call a function and if we create that function over here let's call it um increment like this um all we want to do inside of this increment function is set counter equal to counter plus one like this and it kind of makes sense right this every time we click on this button we are increasing the value of counter um plus one which is exactly what we want and now all we have to do is we just have to come to this increment function and pass to this button sorry and pass the increment function over here and if we save this this should be working right um but the issue you will find if you're a very beginner in react is that this won't work as i click on this increment button over here the value is not changing and you might think okay if the value is not changing in the webpage then it means that there is something like broken over here that the num the variable is not actually changing value because i'm not saying i'm not seeing the changes well this is actually incorrect the variable counter is incrementing as we're clicking on this button because that's how javascript works we're actually setting it to increment and that's working however we're not telling react to re-render the page and show the new values every time the variable counter changes its value which is one of the main things you need to understand about the state of a react application so in order to fix this what we would like to do and just to show you guys that it's actually incrementing i'll just count to log here the value of counter and if we come over here and we inspect element you should see in the console over here and i'll just open this up a little bit that as i click on this it is incrementing so the variable is increasing by one but it's just not showing so to fix this all we have to do is we have to work with this state with this hook called the use state hook like this and you can import it by just destructuring it from the import statement from react like this and it should be fine and what we like to do with the eustate hook is it has a little bit of a weird syntax when it's the first time you're working with it however you'll definitely get used to it as you work more with it so what we do now is we will replace this counter variable with a variable that is defined by a state um and using the syntax for the use state hook so as you can see to define a state all you do is you write const then you open and close brackets like this and then you put the name of the variable you want to create like counter and then um this is one of the weird things is you put uh the name of a function which will change the value of this counter variable so usually what you do is you have this state variable called counter and all you do is you say set and then the name of the state that you created so if this state or this variable was called data you could have named the function set data you this is the common standard that you do it um and i'll explain exactly why you would need to use this as we go through but then all you do now is you set this equal to the use state hook like this and you pass an initial value to this so similar to how we set let counter equal to zero we want to set the initial value to be zero and you'll see that it is working right it is showing the value where we don't have the the variable counter like we defined before but it's still showing zero and if we change this to one it will still show one as well because this is an actual variable that we are defining now one thing that is important to understand this uh okay we have this variable over here but does it work we are actually like increasing the value does it work well it doesn't it still doesn't and it's actually like not allowing us to to use it because we defined it as a constant um so here's where it becomes a little bit weird if you're not used to states but you can't alter the value of a state variable by just setting it equal to something every time you want to change the value of a state instead of doing it like this you have to use this function which you defined over here to mutate it so for example what i want to write over here is set counter like this and i want to put some sort of value inside of here so imagine that i want to just set the counter equal to three and every time i click on this increment button right it's kind of weird but let's see if it will work um if i click on this increment button it actually works now the value is three and it updated to show that value if i change this to four and i click on this button it should start at zero right if i refresh my page but when i click on the button it should become four so you see the the logic right um whatever value i put inside of this parentheses for this function the value of the counter will become whatever we put inside of here right so in order to simulate a logic where every time we click on this button we want to increment this by one all we have to do is we have to say that the new value for counter will be equal to the old value for counter plus 1 like this and now if i refresh my page you'll see that um it will actually work and it is incrementing the value the actual counter variable over here is is working the same way as before like it would it was always incrementing the number however what it's doing now is we know that this is a state so whenever we change the value react knows that the web page should refresh or not refresh but re-render every single element that uses that specific state so we are using that state over here so he knows that the div now has a different value inside of it so it will render the div again just to show the new value and you can go forever and this will work forever now i changed the code a little bit to show you guys another very clear example of how the use state hook will actually work so you see we have here um an input in our screen so just a normal input where you can write stuff and we have over here a state which again is just a variable and the name of this variable or the state is called input value and then we have the set input value function which should be used to change the value of this state and we say that initial value is equal to a string called pedro and over here all we're doing is we're just showing the value of that variable in our screen so what we want to do now is we want to make it so that whenever we write on this input we want to change the value of this state to be equal to whatever is written inside of this input so like if i click and i start writing this random letters over here this over here should change to be exactly what i wrote over here and this sounds a bit complicated when you've never done this in the past however it is a pattern that you will be using a lot throughout react and it is extremely important to understand how states are very useful in this specific kind of situation because if you think about it this way all we want to do is we want to grab the current value of this input every time there is a change to its value so in the in normal html you can do that by calling an unchanged property which calls a function every single time there is um some sort of change in the value of the input so whenever i write a new letter inside of this input it should call a function inside of here so let's create a function like that and call it uh like let on change and this function over here should uh by default have uh as an argument the event type because when you have an input and you pass this function on change over here it does pass automatically the event value inside of each input so you can access it over here if you're confused about this don't worry this has nothing to do with the use state hook individually this is just something that is very common in html on its own so you could imagine that if you want to change the value of the input for every time we write something on this input we could grab over here the value of the input by saying new value is equal to event.target.value because this is how you access the target value inside of the input and you can imagine that all we have to do is we just have to set the input value to be equal to the new value right and if you understood what we talked about the last time you would know that this is not actually how it works because as you can see we'll say assignment to constant variable you can't do that because this is not how you change the value of a state instead all we have to do is we just have to use the set input value function and set the input value to be equal to the new value which is the value inside of the input and as you can see if i refresh my page and i start writing here it will start changing the value of this to whatever is new inside of this so i can say something like please sub to my channel and as you can see it will update the value as i write on it and this is one of the main use cases of states and you'll be using states throughout react because it is extremely useful and extremely important i'll be using states throughout this tutorial as well so if you don't have a very clear fundamental knowledge on the new state hook and why it is useful then it might be a little bit harder to continue watching the video because i might use it throughout the other examples that's basically it for the use state hook and now we're going to go to the next hook which is very important as well and it is a bit related to the eustate hook and that's why i want to talk about it next and it is the use reducer hook okay everyone so now we continue and we're going to talk right now about the use reducer hook which is um actually a hawk which a lot of people overlook and not a lot of people actually know when to use this kind of hook so what i did is i came up with an example which will show you guys when you would want to use this and when it would be useful and how to actually implement it now the first thing i want to say is that the use reducer hook is actually a replacement or an alternative to the use state hook that we just went over this means that they have the same purpose in the sense that um they allow the user or the the developer to create variables that when their values are when they're yeah when their values are changed the page will re-render to show those new values however there is a specific benefit to using the use reducer hook which i will go over right now so imagine that for example you had an application like this where it is very simple um it doesn't use a lot of states or anything but taking into account what we learned from the use state hook we can see that what it does is it has two states one called count which is a number starting at zero and the other which is a boolean called show text and basically what it have what happens is we have this button over here and we are showing the value of count and we also have this text over here which only appears if the boolean show text is equal to true if it is equal to false then it shouldn't appear and the count should represent whatever value the variable count is so what happens is when we click on this button over here it both increments count plus one and it also um sets the show text boolean to be the opposite of what it is right now which basically means that as we click on this um both things will happen at the same time this if it was true will become false and this if it was 0 will become 1 because it increments and if i click again now show text is equal to false so it will become true and count was equal to one so now we become two so basically what's happening is we're altering two different states at the same time by clicking on the same button and what i want you guys to think about this is um what kind of actions and what kind of states we're changing so what kind of actions we are actually taking when we click on this button and right now what we're doing is we're actually taking two actions inside of the same on click function we are altering the the value of the count state and we are altering the value of the um show text state so in this kind of situation where you have um some sort of button or some sort of a trigger that will trigger a couple actions um if it is more than one action that you're trying to change there you're trying to execute you might want to consider using the use reducer hook so that you don't have to actually have many different states and change them individually like this but rather you can have a single state or a single um system that will keep track of all the states that you have that are going to be changed throughout this on click and collectively manage them and change them however you want inside of this on click function so to do that we're actually going to transform the logic that we wrote here using the use date hook into a logic that would use the use reducer hook so the first thing i want to do is i want to remove the use state hook from the imports and i want to import the use reducer hook and then what i want to do is actually want to remove both of this state declarations and we're going to replace it by a single state declaration which will include both of the states in the same object so to do that what we do is we come over here and the standard syntax for the use reducer hook is we say const it's very similar to the use tape but we say const then over here we create a val a variable that will hold all of our states so in this case it will be an object because we will have two states we'll have the um count state and we're going to have the show text state so what i like to call this is something like state right because it will hold many in for many different types of information and then we'll have this thing called a dispatch function which it is similar to just a function that we have in a normal state it will be used to change the values of our states and if you're used to using redux this is very similar this dispatch function over here will be called whenever we want to alter anything inside of this state variable over here and then as you saw we set it equal to the use reducer hook but inside of here we're going to put two different things which are extremely important the first thing we need to put is a reducer function and right now we we don't have this function um but i'll show you guys um exactly how we create this function and finally at the end what we do is we just set the initial values for all the states that we're going to have inside of this reducer and as you guys know because we just we already have the examples set up we're going to have two states one called count and its initial value will be zero and let me just press enter here the other state will be called show text and its initial value will be true like this and you can see it's it's given us a bunch of errors because i saved it and we we haven't created this reducer value over here but uh this is exactly what we're going to do right now so when you define something like a a use reducer hook you need to create a function which will manage what happens when you change your states so i like to create it up here by just creating the function and calling it something like reducer and this will be a function which will be very standard every single time you use the reuse reducer hook it will take in two arguments the first argument will be the state so you can have constant access to the current state of each of the states that you you have in your reducer so like each of the value of each of the states that you're currently managing and you can also grab the action so the action will be a way that we're going to determine what kind of action we're trying to take and what we're trying to do with each of our states if this is confusing it will become a little bit clearer as we go through but the the boilerplate for working with the use reducer hook and for your reducer function is that you use a switch case like this and you basically ask what kind of action we're trying to take and you can determine different actions that can happen to your states so one kind of action that we might want to take is incrementing our account so what we can do is we can say that there's an action called increment like this increments and when you take this action when you call this action we want to return uh some sort of value right so just say return and what we want to return is the new value of all of our states so when we want to increment our count what we want to do is we want to keep show text as it is because we don't want to change that but we want to change count and we want a set count to be equal to the current value of count plus one so what we return is we return count an object including counts and the value of count is equal to the state.count which is the current value of count plus one and we can't forget to also pass the show text value which will be equal to state uh dot show text and the reason why it will be equal to that is because um we don't want to change the show text we want to keep it as it is because the increment action shouldn't affect the value of the show text state then if we want to add more uh types of actions we can just come over here and add other kind of cases i'm not going to add a decrement because we're not currently using it or we're not decrementing the value of the count but one kind of action that i want to do is i want to be able to toggle the show text like this and what this does is it basically returns as you can see over here um it basically returns the current an object with the current count um so we don't change the account however we return the show text to be changed so that it will be the opposite of what it is right now just like we were doing with the states so now what we have is we have a switch statement which has different types of actions that we can take with this reducer and um it returns the correct altered value of our states and at the end we should always pass a default um which what i like to do with the default is just return their empty values in case we're trying to take an action that isn't one of this two over here it will default to this empty state over here and i'm just going to return the empty state so whatever it is right now and i don't want to do anything to it now we have this basically done i just want to close it like this and our reducer function should be correctly set up however you can see we're still getting some errors because now if we want to alter the values of our states we don't do it like this we actually remove this and if we want to access the value of count instead of saying count like we were doing before we have to say state which is the collection of states and then we say dot counts and same thing goes with the show text we say state dot show text and it should be working right now you'll see that um it will appear but as you can see if we click on the button currently nothing is happening because we haven't added the logic to dispatching an action or calling an action and to call one of these actions that we just defined all you do is you come over here you call the dispatch function and you pass the type of action you want to take so we pass over here for example that we want to increment whenever we click on this button and it will go to the reducer function see what kind of type is increment and return the value that the increment function uh executes so right now if we save now it will see that the button actually works for the count but it isn't working for this over here because we haven't dispatched this action yet so to do that we can come over here and say that we want to dispatch an action of type toggle show text and it should do the same thing it should go over here find that the kind of type action that we want to take is this one and as i click on this button it should alter through um the value of the show text boolean and this is a very very simple example of how you can use the use reducer hook i know if you're a beginner it definitely sounds a bit weird and i wouldn't really touch on it um if you're a beginner because there's no like really good use case in the beginning to using the use reducer hook instead of the use date hook however keep in mind that um it is something that is useful later on it is something that is useful whenever you're trying to deal with very very complex states so if you are currently dealing with a situation where you have a bunch of state declarations many different states that are being altered in the same action try to think about it how you could do it how you can manage all of that by using the use reducer hook and maybe it might be very useful in your use case so this is basically it for the use reducer hook let's get on to the next hook that i'll be explaining in this course okay everyone so now that we've talked about the use state hook and we've talked about the use reducer hook um we're not going to talk about another extremely important hook that throughout your react journey you'll definitely encounter and use several times which is the use effect hook and the example that i'm going to use to show you guys is i'm going to be using a public api which i'm going to leave the link in the description it's basically an api which you call and it gives you um some fake data but the link will be in the description and i'll be using axios which is a very common library for making api calls if you've never worked with an api in the past i would recommend checking out a video on that i do have a video on how to make api calls and how to use axios in react so if you want to check it out the link for the video will be in the description as well however if you do want to follow this tutorial by already like installing axios to to be used over here i would recommend installing it um just go to your terminal and write something like npn install axios or if you're using our yarn you can just do yarn add axios and i already have a link installed into my project so what i'm going to do is i'm just going to import it over here at the top and um let's just i already have it over here so why would we want to make an api call because one thing you should take into account is that the user fact hook is just a function that will be called whenever the page re-renders so what do i mean by that well it is used to detect when a page re-renders however it is very powerful because you can actually specify when you want to to like what you want to detect right so for example imagine that you want to have a function that will be called immediately when the page renders right when you open the website um you want to do something imagine that for now what you want to do is you just want to console.log a message well you can do that by using the use effect hook so initially i'll just come over here and i'll just import the use effect hook like this and let's already have it imported into our project and what i want to do is i just want to come over here and i want to call the use effect hook by saying use effect like this and you open and close a function inside of this parentheses what would happen is that whatever you put inside of this function over here is what will be called when the page renders and i can do something like i can console the log a message saying hello world and what will happen is whenever the page renders hello world will be consoled look and you guys will see that if i actually inspect my element over here and go to my console and just refresh this you'll see that it will say hello world over here if i keep refreshing it will keep saying hello world but one thing that is really important to understand is that in the past we've talked about how changing a state of an application will re-render the page so you need to keep that in mind because um that means that this over here will be called every single time um a state is changed and there's workarounds for that and i'll be very specific on what you can do with that um however let's start working with our example which is we want to query some data or fetch some data from a public api and just display it in our screen well to do that what we're going to do is we're going to grab this axios library that we just imported and i'm going to say get because we're getting some data and i already have the api link over here to use but again if you want um to check it out this is the link of the api we're using um it will just return some like some an array with some object inside of it and we can play around with it if we want but for now what i just want to do is i want to say dot get then dot then like this and if you've worked with um with axes in the past you know that over here what you do is you grab the response like this and you can just access this response inside of this function over here so what i'll say is console.log response and if i save this this is the structure you have an axios call to this api and then you grab whatever it returns and if we want to check out the data we just say response.data and now if i come over here and i inspect my element it should be making the api call and it should be returning as you can see the data which is apparently 500 an array with 500 objects as you can see over here and each object contains random information like um an email a name an id whatever it doesn't really matter what kind of data we're working with but this is a great way of actually handling api calls immediately when you refresh the page the thing is we have this data right imagine if we want to display um some sort like a part of that data in our screen so we could come over here and we could create for example a state called data and then obviously set data and set this equal to use state and this will import the use state automatically and let's just set it equal to um a string initially an empty string like this well what we want to do is we want to display this in our screen but what i want to display is i just want to grab this data that a console logged i want to go to the first a comment or the first element that in the array and just uh show in our div over here the email of that person that's all i want to do so data will be equal to this whole array of 500 elements so if i want to access the email of the first element i just say data then i go to zero to say the first element and then i say dot email like this and obviously for now data isn't anything so if i want to access the email all i have to do is instead of console logging the data i can set data to be equal to um the for the data that we got so response dot data then access the first element that we returned which is the element at the index zero and then say that we want to grab the email from that uh specific element so it would be eliz o gardner as you can see over here and now what will happen is and as you can see it should actually display the email in our screen but one thing you need to take into account is let's console.log a message saying api was called and let's see how many times this over here is console logged if i inspect my element right now and go to console log you realize that if i refresh my page it will be called twice and the reason for it being called twice instead of one time is because uh what happens with the use effect as i mentioned before is that it will be called every time the page renders and initially the page renders once which is the use effect will always be called once when the page renders and then we make the api call and we change the value of a state so we change the value of data over here so that means that the page now re-renders to show the value of data which is the email as you can see and now since the page we rendered the use effect hook is called again so what we want is we want it to only be called once so how can we fix that well the use effect allows you to pass over here at the end an array of all of the of all states that you want to listen to meaning that every single state that you pass inside of here it will trigger a use effect call whenever the value of that state changes as well so imagine that right now we only have one state in our application which is data um and imagine we don't wanna uh we don't wanna call it again whenever data um changes well we just pass an empty array meaning that data shouldn't be shouldn't trigger a use effect call and if we refresh our page you should see that api was called is only console logged once and this example will become even clearer if we add another state to our application that i can show you guys how many times this can be called now as you can see i just added um another state to application as we've been doing throughout this whole tutorial um i'll be using the count state which is just a number which whenever you click on the button over here it should increase the value as you can see right here it's just it's changing the value and it's increasing the the value of the state however since we have the use effect uh with an empty array over here which is an empty array of dependencies it should only be calling the use effect once and you see that this happens because the api was called console log only appears once and it's not appearing as i click on this button however if i want to trigger the use effect function to be called every single time the count state changes i just have to pass here the count state and now if i click on this button api will be called every single time the value of the account changes which is it's something that you need to take into account whenever you're working with um your your apis or working with a react project in general i wouldn't recommend not putting an array over here because if you don't do it then a lot of stuff can happen as you can see it will assume that every state change should run the use effect again which can result in many crazy things so i would always recommend specifying what kind of states you want to depend your use effect on and use effect is used for many things but primarily for making api calls as you load the page so for example if you go to something like instagram and you see that when you go to the to the website or or to your page a bunch of images appear it would be similar to that because immediately when you enter into the website it makes an api call to get all of the images get all of the pictures that are in instagram and it puts in in your website or your your cell phone um the result of that api call so that would be something similar to using a user fact um and i don't know if they they even use they probably use react because it's facebook but yeah that's that's that's basically it now i want to talk about a hook that is very weird but very awesome in my opinion it is one of the coolest hooks out there because um i don't know it solves so many problems that we really don't think about because we're using react and it is very important because it will be the base of some of the later examples that i will present to you guys so for example right now i talked about the use effect hook and there's another hook called the use layout effect which is very similar to the use effect hook however i want to talk about the next hook that we're going to work on which is the use ref hook before because in the example that i used for the used layout effect i use the used ref hook as one of the tools to present you guys the other hook that i'm talking about so we're going to talk about the used wrap hook which is one of the most important hooks in react and a lot of people love it okay everyone so now we're gonna go over a very very famous hook which is extremely important in react it is one of those hooks which is pretty easy to understand in the beginning however you'll find some difficulty in actually finding use cases for it in the sense that in the beginning you'll probably not be using it as much however as you go through you'll definitely encounter some situations where using the used ref hook is extremely important and for that reason i wanted to explain and go over some examples so what i want to talk about is basically imagine the following scenario you have a simple component which includes an input a button and an h1 tag showing the name pedro and all you want to do is you want to be able to click on this button over here and when you click on this button it will automatically focus on the input so that you can start writing a new name to be displayed over here obviously we're not going to implement the logic to showing the new name because it's not the point right now however i like i want to point out this functionality which you're able to do in react which is whenever you click on this button over here or whenever you take some sort of action you will be able to focus on an input and to do that you need to use the react hook called use ref so i'm going to import use ref over here and i'll explain to you guys what it does so basically this hook over here is the the easiest way to access and manipulate dom elements so if you're used to coding in vanilla javascript which is javascript without react or any other library slash framework you'll notice and realize that many times you do something like um i don't know saying something like document.getelementbyid or get element by class and you actually manually access the information from the dom elements however you you probably realize that you don't do that in react and the whole point of react is you don't actually need to do that because react provides something known as a virtual dom and um the whole point is you shouldn't be manipulating um individual elements the state of your application should be updating everything for you however there will be situations where you need to manipulate or at least just add some functionality to certain dom elements and the used ref hook helps out with that so for example in this case the the way we're going to manipulate the dom is we're actually just going to access a dom element which is going to be this input and tell our our browser to focus on the input whenever we click on this button and to do that we actually just come over here and declare a name for this reference let's call it input ref and then we set it equal to use ref and initially usually you can just pass a value of no over here like this because uh we actually haven't passed the reference yet however when you say something like an input ref which is a reference to a certain dom element you need to pass a property inside of that element called ref and inside of this property you just pass the name of the ref that you created so input ref over here and now i can access many pieces of information related to this specific input i'll show to you guys an example if i come over here and i create an on click function for this button like this and this function over here will be passed whenever you click on this button and like this imagine that you all you want to do is you want to console log the current value of this input you you remember that you can do that while you're doing an on change by just accessing event.target.value well you can also do this directly within with a reference by saying something like console.log then accessing the input ref and then this is extremely important when you're when you have a reference you need to access the current uh value of the reference so in our case when we when we want to access our input we want to access the current value to represent that uh individual elements that we referenced so we always need to whenever we're accessing some sort of function or some sort of value inside of our ref we need to say dot current like this and then if we want to access the value we just say dot value and you'll see that if i refresh my page and i write something over here like pedro and i open my console like this um i'll just clear it out you'll see that whenever i click on the button it should cancel whatever currently is the value for this input which should be pedro as you can see and the reason why this happens is because we set the raft to represent this input element over here and we can access through input rath.current all of the different properties that a dom element can have and for an input which in this case we it is we because we reference that input we can access a property called value which in itself includes the actual value written in the input we can change this and you'll see that it will constantly update to just show whatever is the new value however there's much more that you can do with a ref and one of the examples that i wanted to show was actually being able to um focus on the on the input right so if i actually just have this over here you see i'm not focused right and what i want is i want to be able to click on this button and when i click on this button this will automatically be focused so i can already start writing and in order to do this you can very easily do it by just coming over here saying input ref then saying dog current and then there is a function in every input um which is just focus like this and you can just you can just call this function um and it will automatically focus when you click on the button you can see that when i click on the button this is focused i didn't click on the input and it still works it focuses on the input and i can now start writing and one of the most common use cases that i actually found um throughout my my experience is actually imagine if you're creating some sort of to-do list application and you have here an input where you can add some sort something right so i'm just going to write something like do homework and you want to click on this button and the functionality you want is to be able to clear the input when you click on this button there's a couple ways of doing this but one easy way of doing this with the user f hook is just making it so that whenever you click on the the button and all the things that should happen when you click on the button happens at the end all you can do is just say input raft.current dot value like this set it equal to an empty string and it will clear the input whenever you click on the button as you can see and this will happen and it's very useful for many situations that you'll probably encounter throughout your experience just keep in mind that it is very useful for whenever you want to manipulate the dom when you want to access the dom so if you find yourself in a situation where you think that if you were using vanilla javascript you could have solved it um then maybe it is an indication that you might want to use the used ref hook now we're going to be using this hook um throughout on other examples throughout our this tutorial um so keep in mind that it is important to at least get some sort of understanding on how it works and just understand that it is used for situations like this and just keep in mind as well that in the future i will show you guys how you can use refs to actually access information from child components from the parent um but that's later on in the tutorial if you want to keep around to see it just skip around and we're going to get to there so this is it for use ref let's get into the next hook okay guys so now we'll talk about the used layout effect and how it is different from the normal use effect i already imported the use layout effect over here as you can see and i already implemented into my application as you can see you might notice that it is very very similar to the use effect almost identical but there is a fundamental difference between both of them um i decided to console.log use layout effect as a message when the user layout effect function is called and i decided to console.log usefact when the use effect function is called and let's see if there's any difference between them i'll open my console over here i'll just clear everything and i'll refresh the page and as you can see um they are pretty much at the same time there's one difference the use layout effect is called before and you might think that it's maybe because um it's above the use effect function on the on the the code like for some reason this is the reason why it is called before but that's not actually true if i copy this and i just put it below the use effect and i refresh my page it should still be called before the use effect and the reason for this is because use layout effect it is fundamentally called in a earlier stage of your page rendering um than the use effect and what do i mean by that well when react recognizes that you need to that they need to render your component it goes through many different stages right it includes um understanding uh what the component is understanding if there's any changes to the state of the component rendering the component but most importantly printing the value of the components to your website so like actually showing it to the user and here's where it changes between the use effect and the use layout effect when you call the use effect it will do everything it can to show the stuff to the user it will even print the stuff to the user and then call the use effect most of the times you don't realize that they use effect is only called after you you sh you render your page because it changes the state so fast that you don't actually see the changes appearing however when you're doing something like an api call that takes a while to load the data you might you might notice that initially before the data is loaded the page will show something completely different from when the page when the data is actually loaded because the use effect is called after everything is rendered into the page and shown to the user in contrast the use layout effect is called before the stuff is actually printed to the user and i wanted to show a clear example of how this would work in an application like this well what i did over here as you can see is i used the used wrath hook which we've learned previously and i just created a reference to a div which isn't actually div it's an input so let me just change this name to input ref and just put it over here but basically the idea is that we created a reference to an input and we referenced this input over here but most importantly we have both the used layout effect and the use effect over here the thing we want to show is that this used layout effect will be called before the use effect and one thing you might notice is that the value of this input as set is equal to pedro so if i didn't have this over here i'll just comment this out the value of the inputs should always be pedro i can't even change this because we set the value to be equal to page rule but what do i do is i basically use the use effect to whenever they user effect is called i want to alter the value of this input to be equal to hello and if i refresh the page you see that um i actually didn't save it so if you refresh the page you'll see that immediately it it is hello and not pedro but if you really take a look you can see that in this like in a millisecond it actually shows pedro but then changes to hello because as i mentioned um the use effect is only called after the stuff is shown to us but the use layout effect is called before so what i want to show here is in the use layout effect i am console logging the current value of the input which in theory before we change the value to hello it should be pedro so what we want to see is i want to inspect element and i want to refresh the page and go to my console log you can see that the input is saying hello but the console log of the use layout effect says pedro which is the original value if i keep refreshing you'll see it will continuously say pedro because it will actually console the value before the use effect actually changes it so you might use this use layout effect in cases where you want to change the layout of your application before it actually prints out to the user and there's so many use cases for it um it is mostly ui based i i guess that's why i call it user layout effect because it is just something it's just a way for you to handle um what you show to the users before some sort of data or some sort of function that you created inside of your use effect is actually called now do i use this a lot um i i don't uh but i think it's just because of habit i love using the use effect and i might want to start using uh use layout effect whenever i i find a a good use case for it um it's just that uh it's just those kind of hooks that when i learned the first time i was like i don't even see any like like any good use case for it but throughout time i've actually used it a couple times and it definitely helps in some very specific scenarios but it also helps if you just use it in general so i would keep in mind that this is a a hidden jam which a lot of react developers don't use a lot but it might be very useful in many different use cases this is basically it for the used layout effect hook and now we're gonna start working with some hugs that are a little bit more complicated okay everyone so now we're going to go over a very very interesting hook which i actually used it in one of my previous videos which is a video where i go over how to make like a toast notification system kind of like a snack bar using react and a lot of you guys were kind of confused on like just wondering what this hook really was about because it is one of the weirdest hooks out there in the sense that you will be only using it in a very specific set of situations and this hook is the use imperative handle hook and i absolutely love it and i'll show you guys a really cool example on like which kind of use cases you might um have to use this um and this is basically it so you can see we have this component over here and we called it imperative handle component but it's just the the parent component and inside of it there's a button right and you can see we distinguish it by writing a label which says button from parent and it is the one that appears over here and then we call this component called button and the button component inside of it there is a lot of stuff there's a state called toggle and it is similar to the toggle state that we've been using throughout the tutorial um if you like set toggle to true then it will be true if it's headed to false it will be false and what happens is we have a button which you can see it says button from the child and when i click on the button it should set toggle to true if it's false and if toggle is true it will render this pen which is just a text saying toggle but if i click it and it's true it will become false so i can click keep like clicking on it uh and toggling on and off uh which which is like just serves as an example for us however i want to present you guys an idea so i want to be able to call like a set toggle to be equal to to false i want to be able to actually set toggle to be equal to true and set toggle to be equal to false from the parent component this one over here and you might think okay that's easy i just need to create this state over here on the parent component and pass the set toggle function use it over here and then pass the toggle value as props to the button component and display it over here however let's let's let's imagine you can't do that you can't just create this state outside because there will be many situations where you won't want to create your state like on the highest ever like level imagine that we want to keep it over here keep it contained inside of the state but we still want to alter the apple like the actual component and call the state from the outside how do we do that well to do that we need to use the use imperative handle hook and the way we're going to do this is we're actually going to make the button component a reference so we've went over what the used ref hook is and i'm going to import the used ref over here and we've talked about how we can reference dom elements but in our case over here what we want to do is we want to reference an actual component and use this reference to call functions inside of the child component so we created this graph over here we we called the user f hook and it's fine however you might wonder okay but you can't really reference a component that's not something that you can actually do and that's true by default the functional component you can't just pass a raf over here like this um it will know automatically that um you're trying to pass a reference uh compared to this value over here and i'll call this actually button ref like this um but yeah we can we can just pass it like we would do over here in a normal html element um but we can do that if we come here to our child component and we import this thing called the forward ref function and the forward web function allows us to transform a functional component and allow it to accept a reference from a parent so to do that we just come over here and before the the definition of the component we say forward ref and we wrap all of this around with this actual parentheses and now we can not only grab props if we want to but we can also grab any references that are passed through our parents which is great because we are we really need to to use this in order to make the use imperative handle hook work and then you might be wondering okay but what is the use imperative handle hook well the use imperative handle hook allows us to define functions based on a ref that if that can be called by using that ref which is exactly what we want so i'm going to come over here and i'm going to say use imperative handle and it will automatically import here at the top and over here i need to pass two things i need to pass first of all a ref which is why we we wrote this forward ref and grab the ref from our parent so we're passing out over here and then we want to um actually create a function inside of it that returns an object which is basically what we did over here so what do i mean by this well this function over here will return an object and inside of here we're actually going to pass functions that we might uh want to create and access through our parent so we can't actually access this set toggle we can but i'm not this is not it will be easier to do it this way and i will create a function inside of here which will basically write this functionality over here it will set toggle to the opposite of what it is right now and let's do it right now let's just come up with a name um let me call it alter toggle i hate this name but you just create a function like this inside of this object and all we want to do is we want to set toggle this logic that we wrote over here and pass it as part of the logic for our actual function and now we don't need this on click because as i mentioned the point of this is we want to actually call this from the outside and if we come to our parent component now this one over here and we pass a ref to this button you'll see that it now actually suggests us that there might be a reference inside of this component and we can accept it and we can pass our button ref to say that button ref references this component then on the button that we want to use we can unclick it and pass a function inside of here and this function will call the the function that we created inside of here the alter toggle you can now access this function by doing something like this you can say button ref the current and then the name of the function so we called it alter toggle and now if you see if i refresh this over here um it says current object is not extendable actually just realized that um i put the actual order of this wrong ref should be after props so we can do it like this and now this will recognize and you can see that we now have our two buttons the one from the parent and the one from the child you know that initially the toggle is equal to false and now if we click on the parent it should be altering the value of the state even though the state exists inside of a child so we're basically altering the value of a child state um which is something i honestly i was mind blown when i learned this for the first time um it is very useful in many situations and i would definitely use it for whenever you are whenever you want to create a reusable component that needs to have to be invoked from the outside so a snack bore is an awesome example for this because you want to call this neck bar whenever something happens but the action like where you call the action of creating the snack bar should exist from like outside of the actual snack bar component if you're not familiar with what i'm talking about um i would recommend watching my video on it but that's basic like the basic gist of the use imperative handle hook it allows you to create this certain functions that if you pass a reference it will be able to be called from a parent component so now let's get into the next hook okay so now we are going to talk about a very very important hook in react which is actually a topic on its own and i do have a video on this if you want to check it out we're going to be talking about the use context hook which comes together with the context api so if you are interested in getting a more in-depth um explanation on how the context api works i have a video on that so i just linked it in the description of this video however i'm going to refresh you or just give you a very simple example on how to implement the use context hook and in which use cases it would be important an example that i came up with is this one over here you see imagine that you have a project where you have a component and in this case we created a component called context tutorial and this component recalls two different components inside of it so there's two different components one called the login and one called user and the point of those components are the fact that in the login component you are able to set a username to a user and in the user component you display that username by showing it like this as an h1 instead of their components you see that in the login there's an input which when you type on it it sets the username to be whatever you you typed on it and in the user component basically it just has an h1 which shows the username um that has been currently written and you can see that this works if i write pedro tech this will work perfectly and this is one of the most important things uh when you get start getting a little bit more advanced and react which is how do you actually manage your states because the way i present it over here it works for very simple cases what i did is i created this state called username and the highest order component so in the component which calls both the login and the username component and i pass the set username function to the login func to the login component so that inside of the log component i can change the username and in the user component i pass this props the username uh value so that we can display that username value um as you can see over here however imagine that you have um thousands of of state you have not thousands but you have a lot of states and you can't just be passing all of them through props because it is not maintainable to have that many props one way you can do it is by using the context api which allows you to manage your states very easily so in order to uh basically change this logic over here and into logic using the context api the first thing i want to do is i want to remove the props because with the context api we're not going to need props being passed to each single component which is one of the benefits of it i'm going to remove those props and we're not going to be taking any props we're actually going to be accessing everything from the the context in itself that we're going to create right now we're going to do everything inside of one file which is this context tutorial file however um i do recommend separating your logic and writing some of the context logic in external files as i mentioned if you want to check out how to separate and how to organize your project better with context api just check out my video which i explain everything however over here we just want to be able to create a context which allows us to have have access to all the states that we pass into that context inside of all the components that are rendered inside of this context tutorial component over here so what we want to do is we want to import from react the create context function like this and this function over here it already comes with react and it allows you to as the name says create a context so over here above our component i'm going to create a context called um i don't know let me see app context and set it equal to create context and i'm gonna pass no for now but i'll explain exactly what this means so how we're going to organize uh our states or how you organize your states using context api is you create this thing called a context and a context is just almost like a collection of states or a collection of information that you want to access throughout the whole tree of components inside of the component that you are right now so what i can do is i create this app context and wherever i want to have access to this states or this information i just wrap it around with the context so i'll just come over here and wrap both of this around with this and i have to say dot provider like this and then dot provider as well and inside of this app.context.provider we will have access to everything because this is basically what we're saying as i mentioned a context is just a collection of states which you can have access to all those states inside of the components and structures that you put in inside of the wrapping provider as you can see so what you need to do now is you need to pass a value to this uh provider and the value will be all of the states and functions you want to have access inside of it so in our case we want to have access to the site username function inside of our login and we want to have access to our username state in our user component so we pass both of them over here and now if i want to have access to both of them instead of passing them through props all i have to do is i have to come to one of the components and then i have to import from react the use context hook like this and i have to import the context that i created in our case the context that i created is this one over here the app context so i do need to have access to it in other files so what i want to do is i want to export this context so that inside of our user.js i can just import it from uh our context tutorial file we can just import the app context like this and then instead of this file instead of this component we can just say that we want to grab uh like this uh values from the use context hook and access the states inside of the app context that we created over here and now what we can do is we can just grab whatever states or values we want from this uh this by the structuring like this so we pass the username and a set username function so in our user.js we just want to have access to the username so we can just grab the username like this and same thing goes with the login.js we can come over here put the same logic do the same imports and instead of grabbing the username we now want to grab the set username and it should now continue working if you can see i refresh my page i can write and it will continue working perfectly and we're not passing props to any of the components now in a very simple and small scale like this example that i just showed it might seem useless to do something like this but believe me when you're working with an application especially applications where you have something like a user who has a bunch of information about it so like it has a username a pat not a password but a username a name an email a birth date some kind of information that you want to have access quickly throughout your application you can just create them and pass them through a context and then have access to those information without having to pass each and every single information through the prop so that's the basic idea of the use context hook and it's it's a really important one however now we're going to be talking about some more advanced hooks which are mostly used to optimize your react application okay everyone so now we're gonna go over um one of the more advanced hooks that we have in react and the reason why this one is considered advanced is not because it is hard to implement or even hard to actually get it to work at the first time it is because um the use cases for it probably be found only situations where you're working with more advanced stuff um this is the use memo hook and the whole point of using this hook is to actually improve performance and be able to decrease latency on huge computations that you make throughout your application and the use cases for this are are very very narrow in the sense that uh many people who are beginners or intermediates probably won't uh deal with this i only use the use memo hook once um and the reason for that was because i did the whole computation in the front end when in many situations you might do it in the back end and when i talk about computation i mean stuff like an algorithm and the example that i played out over here is it's pretty simple um it won't actually like in this case over here we're not dealing with a lot of data uh which might seem a bit redundant to use the use memo hook in this case however i think it's a good simple example just to show you guys how to implement the hook and what it actually does so as you can see i have a very simple uh react component um inside of it we have a use effect which makes a a an api call to the same api that we we used for the use effect and at the end this should return a list of objects called comments it will return 500 of them and each comment should include information about a specific comment so like the author of a comment the date in which a comment was created on the comment itself that kind of stuff and when we get the response we set the state called data to be equal to the actual list and then we have this function which i created called find longest name and it's very simple all it does is it has an argument called comments which is a list of comments and then it calculates what is the longest name out of all the names of the authors of each comment so it goes through the 500 comments checks out um like all the names and just at the end returns the longest name um and the thing about this this over here is that the algorithm um it's fine right but the thing is uh it will at the end of the day be the best case scenario for something like this and what i wanted to to show you guys is that over here i actually consoled logged um a message saying this was computed just to show you guys that when i um i have a div down here at the bottom where i call the function saying find longest name and you can see that the longest name is presented obviously it doesn't look like a name because it was fake data but apparently out of all the authors this was the name right and if i open my console log over here um and i refresh my page we should see that wait let me just open up my console we should see that this message over here appears once right yeah as you can see over here however i want to show you guys something interesting uh this over here this function by default will actually be um recreated at re-render so if i had a different state in my application and that state was changed it will trigger a re-render of this whole application and this function will be created again and by default if a function is created again it would also recompute all of this information which means that this over here would be recomputed every single time a state change changed in our application which isn't really efficient especially in cases where it's more than just 500 comments it's like billions of comments or billions of data points um it is not efficient and i want to show you guys um how this would actually play out okay everyone so as you can see um i just created this very simple addition to our example i created this state called toggle and it is a boolean which starts at false and there's a button over here which it just says toggle and the whole point of this is whenever i click on this button it should alter the value of the toggle state to be the opposite of what it is right now so um i should be clicking on this and the thing should be appearing and then i click on it again and it should be disappearing but one thing that you guys should be noticing is that every time the toggle state changes the the message this was computed appears again and as i mentioned before this means that every time the state which is not like it doesn't even get like it's not related to the find longest name function changes um all of this gets recomputed which doesn't make sense right we really we only want to recompute all of this whenever the the actual data changes so whatever we're passing over here changes and in this case we're p we're passing the data as uh the arguments to this function so we need to find a way to tell react to only re-render this function only recreate this function whenever um data changes or whatever other dependency we want and the only the way to solve this is by using the use memo hook so i'm going to import over here use memo from react and it's actually pretty simple to implement but what i said before makes sense which is um the scenarios where you would encounter this are pretty advanced because you would have to be dealing with very large computations to actually need to use the used memo hook so one of the things that you would have to do is first of all create a name for a new function that will be memoized and if you're not familiar with the topic of memorization it's it's very related to like um algorithms and algorithmic complexity i would recommend checking it out if only if you're interested um it's not something that it's necessary for web development but um if you want to check it out just feel free to do so it is really interesting so what i would do is i would come over here and say get longest name as a name for the the memoized function then i would set it equal to use memo like this and the use mule function takes in two arguments the first one is a function that will it's called the compute function and it should return some sort of value so what i'm going to put here is the find longest name function and the data and what happens is this is the function it's almost like this is replaced by the find longest name function in the sense that this over here will only be triggered to be recreated and root and and called again whenever we something in our dependency array changes and i'm going to zoom out so you guys can see it so what i mean by a dependency array is the second argument of this used memo hook is the dependency array which is a similar concept to what we talked about in the use effect whatever variable or states we put over here or what is going to determine when this function is recomputed so in our case we only want to recompute the value that is returned from this find longest name which is the actual longest name whenever the the data the data changes so we can just put data over here and now use memo will automatically know that this is only going to recompute when the data has changed so now we just need to change this over here to instead of saying find longest name we just pass the memoized function and we don't need to actually pass the data because we are passing the data over here and this should just return the value computed from the function over here so now you should see that um the thing should still be the same because we're find longest again longest name returns the same value as find longest name but the difference is that you can see it console logged this was computed once but now when i toggle it is not console logging again because it is not being recom like it's not recomputing um every time a state in our application changes the only time it will recompute is if data changes which i don't know how i would in this case alter this maybe we could if we passed for example um toggle as a state here for some reason you would see that it would still recompute every time toggle changes because this is the whole point of a dependency array right whenever the value of this changes which it is changing it should try to find the new value inside of this function over here so this is the basic idea of the used memo hook again it's it's not very common compared to other hooks that we've talked about in this tutorial however it is indeed very important to understand especially if you're working at a higher capacity at a code base that utilizes a lot of data to to to manipulate it to do something with it um it is important to understand that you might want to use this hook so yeah that's that's basically it now let's talk about the last hook which is the use callback hook it is very very similar to the use memo hook and let's just get into it okay everyone so now we got into our last hook which is the use callback hook and as i mentioned before it is extremely similar to the used memo hook and you will be able to use everything that i mentioned previously to the use memo in order to truly understand how the used callback works so the problem that the used callback hook actually solves is very similar to the problem that they use memo solves the fact that for example when you have some sort of function that is passed to a child component for example or just a function in general um that you have in your application uh it will recon like re recreate itself at every render and that will cause issues both for the situations where you might want to use the use callback and for situations where you might want to use the used memo however there is a very clear difference between both of them which is that with the use memo hook you're able to store a value that is memoized from a function so a function that returns some sort of value you can memorize that that and store that that value into a variable which is not this case it's the case that we did with the used memo however the difference with the use callback is that with the use callback you don't store the value that is returned from the function you can actually store the memoized function in itself so i just created this example over here so you guys can understand it a little bit better in this example what we have is we have two states again we have the toggle state which just toggles from true to false whenever we click on the button and we have this state called data and data right now it's just a string saying yo please sub to my channel um but technically this could be replaced by data you get from an api i just want to make it as real as an example as possible um and i didn't really want to use the the the same api i was using previously however if you want to use that you can use it i'm just saying that right now um let's just keep it like this it's just a simple string um that says yo please sub to my channel and we have this function called return comment which all it does is it returns the data so in this case it returns the actual string but imagine in your case if you're working with an api you can do whatever you want to the data over here you can make the request over here you can manipulate the data you can do whatever you want but the important thing is that at the end we get the data back because we passed this function the function and not the actual value we passed the function into as props to this child component called child and in this component we have a use effect which is called every time there's a change to our return comment function that is passed in our props and as you can see inside of the use there is a fact it's just console logs um this matches this message saying function was called and we have a div over here which just returns the just displays the actual value that we have from the return comment function now you might imagine that in this case it's different from what we did with the use memo because um clearly we are just we're passing the exact function the return common function to the use effect so this will only be shown uh when the return comment actually returns something different from data right when it did something different right it won't be called every time something happens into your component but the problem is it will you'll see that when i refresh my page um the the console log says function was called which makes sense because uh we re-rendered we recreated everything all of our components so it must have called right but the thing is uh when i toggle through this button which again remember this over here is not even in the same component as this over here this is on the parent component but even though this is the case when i click on toggle it still says the same message it's still recreating um it's still actually triggering this use effect every single time a state changes which is completely unrelated to what we really want to focus over here and the reason for that is because despite our our dependency in this user effect not being an actual value that or an actual state that is changing consistently with our component it is a function and as i mentioned with the use memo a function is recreated at every time there is a state change so what we really want to do over here is we really want to say to our component that we only want to recreate this function whenever um there is some change in our data which is the dependency we have and you might think okay this is this is exactly the same as what we did with the used memo so what's the what's the difference well because in this case we are actually storing the function in itself and not the data you can see we are actually storing the function so uh we're not just storing the value that it returns we're storing the function and the distinction becomes clearer when i add something here like i'll add a variable called name and the return value is data plus name right imagine this um so now over here i add the value pedro well you couldn't do this with the use memo you see it still says page over here you can do with this with the used memo because use memo only stores a value and not a function but they use callback you can actually come over here just say use callback just like we did with the use memo and at the end just like we did with the use we will pass the dependency that we want which is the data and now it says function was called once but at every state change it doesn't actually console log anymore because the function is not being recreated every time some sort of state was was changed because we actually used to use callback so that's the distinction which i really want you guys to understand this over here is used for case it's pretty much the same use case we're doing the exact same thing we're trying we're solving the exact same problem but the thing is in this case we needed to return or to access a function whilst with the use memo we wanted to access the value and i feel like this is the best explanation i can come up with because um it is a a it is complicated it's 100 complicated um it took me a long time when it when i learned about both of these hooks to actually understand and there's very specific scenarios where you need to um so i would recommend at least understanding how they work so that when you encounter those scenarios you can know automatically what you need to do so this is basically it for the use callback hook and this is basically it for the video i really really hope you guys enjoyed this video because it took me so long to actually make it um i really hope you guys got value from it uh it wasn't my intention with this video wasn't to give a very very in-depth explanation of every single hook it was more of like um just presenting them to you with really quick explanations and examples which which i think is extremely important actually giving out an example of where you might use the hooks so i i really hope you guys actually got value from it if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting two to three times a week and i would massively appreciate if you guys could do that it would help our channel grow and i'm really really proud of how fast our channel are actually growing so if you guys could just help me out with that i would be very grateful for it again thank you so much for watching and i see you guys next time

Channel: PedroTech

Views: 29,816

Rating: 4.9833927 out of 5

Keywords: computer science, javascript, learn reactjs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react tutorial for beginners, react hooks, react hooks explained, react hooks tutorial, usestate tutorial, usememo tutorial, useimperativehandle, useref tutorial, usecallback, uselayouteffect, learn react js

Id: LlvBzyy-558

Length: 86min 21sec (5181 seconds)

Published: Mon Aug 02 2021

Reddit Comments

[u/jubbu]

I don't really understand useReducer hook. You could just as easily combine count and showText into one state variable. What is the benefit if you're not using redux?

[u/AmatureProgrammer]

Noob question but do devs use all this in a job as a react dev?

[u/YouDantKnowMe]

Learn useSelector from Redux & you will fall in love w/React

[u/ylmazCandelen]

this video already was in my feed and bookmarked it hope I will have time to check it out soon ^^

[u/SexyEyyEff]

Meemo made me chuckle lol great overview 👍

[u/Sljmaitri]

Basic question - do programmers continue to use classes for state related components or has that been totally replaced with hooks?

[u/logintolifenow]

This is great thank you