React Hooks Crash Course (useMemo, useCallback and more).

hey there my gorgeous friends on the internet today's episode's about hooks not the captains but reacts that's a terrible joke oh my gosh so I'm gonna try to cover all of the the best of my abilities there's so many of them and there's so many weird laws as well like use Bible transition and call back and just use now there's there's one just use like at what point do we stop and just switch over to zeld that's my question anyway let's start getting a look at into this what am I saying and yeah drop us up drop a like if you like this content I really appreciate it then check out my courses down there below as well okay let's start off with the first one and this is the most popular one called you state so this is a hook that gives you the ability to re-render component and react so we have a count here so you basically make an array like that and it takes in the count which is the actual like variable that gets updated and then the setter which is a function here so here in the use State we set the value in this case it's zero of course we can render that out on the screen if we add count here like that as you can see it's zero and then I just set an on click on it where we can pick the set count and in the set count we'll just update count with one and if we click as you can see we have one two three four five it works perfectly fine let me drop that and a H1 so it's a bit easier to see just like that cool so that works the thing to keep in mind is when you have another component that's being rendered in your app here and you're using use State and updating a value that contact is also going to get re-rendered even though nothing is changing in this component so if I hit here and it's not doing it now of course Let me refresh this extension tool is really funny highlight it's clicked oh gosh Come on there we go so as you can see contact has a rectangle on top of it meaning that it also gets re-rendered another thing to keep in mind is that set count here is asynchronous and if I call it multiple times it's just gonna get batched together so let me show you I'll create a function called increment and all this increment is going to be is an arrow function where we are gonna update we should name it const increment there we go is equal to there we go and here we'll just say set count and we'll do count plus one all right perfect and then we'll copy this multiple times down here so rather than doing set count here what I'm gonna do is just call increment there we go hit save so what kind of behavior do you expect it to be well we're only gonna get one here two three four even though we call this multiple times the value here is not the latest one that we're gonna get and this is all gonna be bashed and basically this is going to be zero zero and zero every time set count takes a look at it so if if you do want to chain together um multiple updates or Setters or maybe you really want the latest value you need to now use count here but to actually get the previous value from the set count so rather than doing this what you can do is actually have a callback here things at a previous like counter and then here you can get the previous counter and update the value like that so now if I copy this three more times you're gonna get the value that you expect to get so here it would be zero but by the time it gets to this line it'll be one so it'll be one plus one and here it'll be two plus one giving you three so if I click click click as you can see keeps getting incremented by a tree so the best practice I always advise to use uh just the latest value for from here uh otherwise you might encounter a couple of weird funny bugs that is quite hard to decipher so that's you state one of the most important Concepts in react is use effect and one use effect is is essentially side effects because every time you call you state your component gets re-rendered but sometimes you might want to run code that's outside totally independent from that rendering system because in this case look what I have here I just have a use Date with an input and every time I type here we're outputting the inputs value right here but this component gets re-rendered every time so what if I also want to do like a fetch request like I want to fetch some data Maybe on this input so maybe I'm searching for like a joke here um if I just call fetch here that that would be not okay I can't even do like a console log and just say re-render because what happens we learn that whenever you call you state this component gets re-rendered so so you could imagine if I start typing and I'm making API requests over and over every time here like that that's not too good for us uh so we have to somehow try to make the API request either only once or have the ability to control when it gets re-rendered because I could have another variable another state in here called a counter the one we had before and set counter and if I set the equal to use State and I'll just pass in like zero look if I start updating this for example so on the use effect I'll just add an on click and say set run Arrow function set counter and I'll just do brief counter plus one there we go cool so now take a look at this when I click there on my counter this still gets re-rendered so no matter what part of the state changes this code is gonna keep running and running every time so what we can do rather than doing this is add a use effect so if I go down here and say use effect this is going to take in two parameters One's Gonna Be an Arrow function and the second argument is going to be an empty array and what the empty array means is that this code and the arrow functions only gonna run once when the component initially gets rendered for the first time so if I say rendered for the first time I hit save you're gonna see if I go to inspect go to console we are only getting it once even though I'm typing here we're clicking here that is only running once so perfect so this would be a perfect place now to do a fetch request it would be a great place to do something like document.title I can update this and say it works so again it's gonna wait for everything to be rendered out on the screen first and then it's going to run the side effect for us so now it's very safe for me to go in here and just say input like that again it's only going to run after so when I type oops as you can see actually it doesn't work it doesn't get updated why this is what this dependency array is for if you pass in a prop if you pass in a state this use effect is also going to run every time that proper state is being changed so not only for the first time but also every time it updates so if I add input in here now and hit save now as soon as I type as you can see after the component gets re-rendered that also gets updated up there perfect so this gives us really good control because if I click on use effect here remember that's our increment button as you can see that component gets updated but this code here is not gonna run anymore console log use effect let's add that so it runs for the first time it runs when we update our input value but not when our counter value increases alright so it gives you really good control on what you can do take this little example out I have a const incrementary here that just sets a interval and updates set counter to counter plus one right now if I refresh we're gonna see that we're getting two four six eight so why is that happening the thing is that we'll use effect uh is we're mounting the set interval but we're never getting rid of it we're never clearing so if we navigate over to other parts of our page and coming back and this component gets remounted it's gonna add another set interval to our call stack giving you 46.48 so what you need to make sure with these use effects sometimes you might actually need to clear out uh the interval so we can say return here and we can just say clear interval and we can pass in the incrementer like that and that should clear up everything and look at that we are getting one two three four five also be really careful with use effect because if you are updating a a piece of State here and if you have a dependency here on the same thing so if I have counter here it's really easy to create an infinite Loop because what's happening well this use effect is gonna run to encounter gets changed updated right but what does that mean it means that we're running this whole code again because we're setting counter again which is going to cause a re-render which means we are going to set another interval all right so it's very easy just be careful with the dependencies because if you have a dependency and you're also changing the state and the use effect it can cause an infinite Loop so be aware okay next one is use layout effect and this is very similar to use effect and there are quite a couple of places where you might need this over use effect so use effect actually waits for the component to be rendered on the page and painted and you see all the content and The Styling and then it runs whereas use layout effect runs before the content gets painted on the screen and why is this useful because there's certain situations where you might get flickering on your screen either from styling that you might want to apply will use effect or certain updates that you might want to do so in this case check this out I have that same counter that's set to zero and then this use effect I'm basically running a test and saying hey if the counter is zero generate me a render not random number and down here what I'm doing is I'm just setting the counter to zero every time so when I click it does work you're gonna see but the the actual screen here is going to turn blank for like a millisecond now this is quite quick but it flickers for a little bit right there now again why is this happening is because this use effect runs after the actual value gets printed out so you're actually gonna get that zero here for like a split second okay you can also think of it like when you're doing an input check right or maybe a user you might get that flickering for like half a second so what use effect use layout effect is gonna do is gonna run synchronously and it's actually is going to block your code for a split second but it's gonna avoid that flickering for you and when it paints it's gonna paint with the updated value already and it's not going to flicker to that zero so check this out all we need to do is change this to use layout effect and that's it it's the same callback function that that it takes and the same dependency array that it takes but now as you can see no more flickering alright next up we have something called context context essentially allows us to share application State between all of our different components so what we do here it's I put together an example here I'll just go through it really quickly so we have a contrary context here so this is just the types to add to our counter here so we have a count that's a number an increment and a decrement that don't return anything to us so just void um and we're just setting up the interface here just so we have nice typescript support but what we're doing essentially is creating this counter provider and this is going to have some sort of state so in this case it's just the counter and then we have our functions to increment and decrement that and then the values that we want to export as well so in this case the count we want to export the increment and decrement so here when we're returning what we're doing is we're passing in this value object that we just made here and this value object is going to be available to every children that is wrapped in this provider all right so just wrap your app in this context provider pass the values that you want for the rest of the components to have available in this case D Street and that's it so you create the context provider and down here I just have two different components I made that it's in the same file just to keep it nice and simple alright but this is what we're rendering out in our app so we have our counter provider and we have our increment counter and the command counter alright so two separate components and if we want to use the context all we need to do is import this use context and pass down the provider that we want the data from so in this case our contacts provider right and then all we're doing is we're returning a button that has an increment on it again we can we can get any values we want here if I want the count I can render that out here as well and this component if I want to so I can go here and say H1 and count and that's going to work fine we just need to make sure we wrap it like that and I guess we don't have a div so we can just make a fragment and pop it then pop boom there we go so you can consume all of that as well now I personally don't use context because I use external packages that I feel like just a tad bit better than react solution that they give here so what I tend to opt for usually is tan stack because they have caching as well already included in the Box it's very easy to share State across all the components and have that ability to control your caching to like down to a T is really important because one thing about context is that once your context value updates all the components that are consuming that context will get re-rendered alright cool let's have a look at use reducer use reducer is like state but you can customize it more and you can add a bit more complex logic than this because here you're just passing a value and you have a Setter and that's pretty much it but let's do that we'll go here to the top and say cons initial State and what I'll do for now is I'll just make an object and I'll pass in one value which is going to be the background color like that all right and the default is going to be let's say FFF which is white perfect so we have our state and then we'll create something called a reducer which is going to take in a state and an action all right what the hell does all of this mean well we're gonna make a switch statement here and take in the action and the action again just describes what we want to do and this can be anything so I can say case uh black right so if it's the case black then what I can do is return my background color has zero what is it is it that I think that's it perfect and then we can have another case for red for example and here we can return a background color of red and then we can also add a case of default and here we can say draw new error or we can just always have it as return background color and we can say initial like that cool all right so now that we oh I'm missing the arrow function here this should be a function like that so that's perfect and now we can import this used reducer like that and rather than using this we'll say const state comma dispatch and we'll set this equal to use reducer and we'll pass in the reducer that we just created and also the initial State and hit save perfect all right so now that we have all of that hooked up we can start using it so I'll just get rid of this increment counter here we won't need this we won't need this either as well and just clear everything up like that cool so I'll just have the H1 here and say hello reducer there we go I'll go on this one now the class name and all we'll do is add some back decks and see background whoops actually we need a style I haven't used this in ages so I'll see background color is gonna be take a guess what is it well we can get our state background color there we go as you can see it's all white so now what we can do is use this dispatch to dispatch all of these actions that we have and all you need to do is essentially pass down the keyword of the action that you want to dispatch so if you do black then it's going to return you this so let's go down here and I'll just do a button here and we'll say and turn to Red so I can just go here and say unclick what I want to do is dispatch and I can dispatch red and hit save so poof done and you can do the same thing you can dispatch something else like black and take a look at that all right so it's a different way of creating State I do like it I do appreciate it but these days to be honest for again you're using something like 10 stack or something like sustan for example that's something that I would opt for to be honest so zostan is super nice and it's been received because you can create these nice compact states that can be shared across all of your applications it has type script support and everything and it's just so much easier to get going okay next up let's talk about refs so in react you're probably gonna find that like how would I get the height of this element for example because there's no real easy way of just going here and doing the document.query selector right we're not working with vanilla JavaScript so we're not going to write any imperative code so rather than doing document query selector and stuff like that you want to reference to this let's say we want to focus this or you know again maybe use some sort of intersection Observer so when we scroll in this will be visible so we need a reference to this uh so what we can do is use this use ref so what you do is literally just create any variable let's call this uh title ref set that equal to use ref and then we can pass this down right here as a ref like that so now we actually have a reference to this uh this is just a typescript error so don't worry about it so now I can even use like something like a use effect so after our component gets rendered out on the screen I can maybe get its height to see what's going on so I can just say something like const oops title console log title ref.current that's how you select it and then here again whatever you want to do okay so there we go simply we just add the ref and then here we have the ability to control it to our hearts content let's talk about use memo use memo allows us to essentially cache a value we're essentially stopping it from re-rendering every time a component re-renders it essentially saves the value and it's going to reference it after the next re-render so what I have here is a count that's set to zero and we have some sort of expensive calculation uh yeah this can be anything really and then down here what we're doing is we have this rendered value and what I'm doing is calling this use memo on it like that see so it kind of looks like use effect in terms of it takes in the Callback function and then an empty array and this array again if I add a count here then it's gonna invalidate that cache and re-render every time count changes but if count is not changed and then it's going to maintain and keep the state so take a look at this we have rendered value right it's just going to generate the random number here and if I click refresh as you can see it generates it for us perfect that's what we want however if I click count here that's essentially going to re-render my component but since we're using use memo as you can see that stays cached then we don't need to worry about it anymore so that's fantastic now again if I do want it to update based on that then I can just pass down count here and now every time we click that we can run that expensive computation so you can imagine you might have components that don't really need to be updated every time maybe a counter or a piece of State changes in your code you can solve that by adding a use memo on it okay next up let's talk about use callback and use memo and gosh I hate this I hate this so much why does react have all this site where we have to go deep dive into all the internal workings to figure out why everything re-renders oh this is why I just love svelt and I'm tired of all this reaction but anyways what's the idea what you use memo and use callback so use memo essentially lets you memoize or Cache a value and use callback lets you do that the same for a function because the important bit here is if we have two identical functions you can imagine uh they're not going to be the same so basically on every re-render even though you function I mean looks the same in this case here we're just setting account on a re-render this won't be the same one that's allocated in memory so it's gonna have to be rebuilt um meaning that take a look at this so we just have a count here and we have a handle multiplier where we take that count and just multiply it by a value and here this first button we're just increasing the button and this lets us multiply it like that and what we're doing is we're passing down this function down here into our multiplier now remember if the component gets re-rendered this this prop technically is going to change because the function is going to be different meaning that if this is a like an expensive computation that you're doing here this is like a simple example but you can imagine maybe your uh filtering out a large list of users or a large list of movies or something and then this might become a bit more inefficient but generally speaking again react is going to Define for simple stuff like this unless you have something that you could really tell that's slowing down your application you won't even need to use these um okay so what can we do well we can go here and if we check I just have a console log render multiplier in here and if we check the console if we click on click me see that still renders out this component for us which is not what we want to do so what we want to do is essentially is this cache this function here so it won't be reused on every re-render we basically have a snapshot of it and we can just reuse it so what we can do and by the way use callback and use memo you can pretty much like use both here to be honest um try this again react I'll use memo alright so here so we need a callback function we're returning a function like that that should be fine set my count we got the previous counts and the previous counts times what is wrong oh my dependency array though there we go okay so there we go so let's pass this down now handle multiplier and pass it down here cool and the last thing I'm going to do is wrap this into a memo like that which essentially is going to make it the pure component okay so and there we go as you can see now render multiplier gets rendered once we can click click click and if we click multiplier look at that we are changing the value of that and we are not re-rendering that function anymore or that component so that's it and again if you want to turn this into use callback you can do that too again it's more like syntactical sugar so it's all we need to do is change this from react use memo to use callback and again this is gonna cache basically our function for us and save it between re-render so we don't even need to return a function here we could just get rid of all of this and do a set count like that perfect and there we go and again the way this works again is basically the array here is the dependencies that would invalidate that cache for you so if I press count down here that would invalidate that meaning if I it would as you can see it would just re-render again and recreate that function for you all right but that's it again it's technical mumbo jumbo that we shouldn't really care that much about but it's here okay finally let's look at use transition while use transition allows us to do is to offload um code that is not urgent to be rendered out so in this case here I have this input here and I'm fetching some Pokemons I'm just using a used effect here and I'm fetching it and I'm setting the set Pokemon over to data results alright so down here I'm just looping over it and I'm outputting it on the screen now the thing is though I also added this filter Pokemon here and all it's doing is it's checking to see basically on the input if it includes any character so basically if I type B as you can see we have all the Pokemon would be ball Bazaar all right so this is all getting re-rendered right here so this is fine but if you have a shite computer and imagine we're making an API request to a list that's really large and if we let our CPU just basically update like that on every keystroke it might cause our application to really like really bog down so what you can do is use something called the use transition hook to essentially improve the performance of this filtering up your operation so when the user types the use transition hook will essentially Mark the state update as a non-urgent update this means that the filtering option will be essentially executed in the background while the component keeps continuing to be re-rendered so let's look at how this is implemented so what we can do is here in our handle change where we're setting our input I'm going to go to the bottom I'm going to say start transition all right and this is going to take an arrow function so what we can do is add the start transition and set our filtered Pokemon in here like that and now what we can use from this use transition Hook is the spending and start transition right so we use that one here and our spending can be used down here in our UI and that's it now the filtering operation will be executed in the background while our component keeps getting re-rendered and once the filtering option is complete the Callback function will be executed and the filtered Pokemon list will be updated and there you go so did you get any of that hopefully hopefully you learned the thing or two I know this is quite difficult to to grasp and understand and to be fair like if you go down a route of using something like next JS a lot of the caching and optimizations are done by Max so you don't need to worry about it as much and again loads of other libraries solve the issues that react try to solve so when it comes to State Management and caching 10 stack tractor is fantastic for that for any client-side State Management maybe you want you know to update the product you know or a shopping cart or something simple like that you have a stand with fantastic support so don't close yourself up to just like what react offers because that's kind of what makes the react ecosystem nice in the first place is the external packages but the funny bit is in sveld everything just kind of works so you don't even need the packages but I'll let you think about that until next time I don't know I'm really feeling the need to get into game development and I want to do some Arduino tutorials as well let's learn about physical Hardware because it's fun it is it's really fun trust if you've never tried it before get yourself an Arduino kit and get your cables ready because we're gonna do something cool all right

Channel: developedbyed

Views: 82,286

Keywords: react, react hooks, usecallback, usememo, usestate, react state, react useeffect, react component, react tutorial, react js, react hooks tutorial, react crash course

Id: 9mTgKFjJRXg

Length: 31min 48sec (1908 seconds)

Published: Fri Jul 14 2023