Make React Easy With These 5 Custom React Hooks

now this next toke i want to talk about is definitely going to be my favorite of the five [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner and in this video we're going to focus on five amazing dom based react hooks and we're actually going to be starting with hook number 11 which is called use script and the reason for that is i've already covered hooks one through ten in two previous videos i'll link those at the end of this video and in the description for you to check out so this very first hook i want to cover is called use script and there's a really simple implementation here of our script component we're just loading in the jquery library using this and then we're accessing that dollar sign which is on the window object so we're saying window dollar sign to access jquery and we're just getting the width of our window as you can see over here it prints out 279 because that is the width of the window and inside of our used script here we have just a really simple hook this hook is using this use a sync hook which is a hook from the previous video all this hook does is allow you to run some asynchronous code and it's going to give you back a response which is going to have loading error and then the value of the result in our case we don't have a value because all we're doing is loading a script so all we care about is is it finished loading and inside of here all we're doing is creating a script element we're putting the url to the url that we want to render which is what we passed to this use script and all we're doing down here is we're just waiting for that script to finish loading and once it does we make sure that we set loading to true and then down here we're just calling that jquery method once it finishes loading this is great when you need to load in any type of script after the fact so you need to dynamically load a script for example for stripe checkout you need to do this or maybe for example you want some google analytics or other analytics service doing this use script asynchronously is so much nicer and so much easier when you only need to load a script in certain situations where you can't do it with npm imports now the next thing that i want to talk about is going to be this use deep compare so let's just come to our app.js we're going to get that component and we're going to render that out to the page and we're going to look at the code for this use deep compare and i'll just close out of the rest of this so use deep compare effect works very similar to a normal use effect but instead of comparing references we're actually comparing the actual values of the objects being passed to it so let's take a look at the actual component itself which is using this hook because it's a slightly complicated component as you can see we have an age variable and then just a random count variable that are both set to zero and then we have a use effect counter and a use deep compare effect counter and all that this is doing is telling us how many times we are running these different effects because you can see in our use effect all we're doing is we're just taking our counter and we're incrementing it by one and here we're taking our counter for our deep compare and we're incrementing it by one so these two different use effects are used deep compare effect and use effect are just incrementing the counters right here by one so as you can see they both have ran one time each then down below we just have some divs rendering out everything and all that's happening is we click increment age it adds one to our age variable and if we click increment other it adds one to our other count and the reason that this use deep compare effect is so important is because as you'll notice if i click increment age both my use effect and use deep compare effect are both running at the exact same time every time we change our age they both run but if i change our other count you're going to notice our use effect is running even though we only have this person object here and this persian object only has an age inside of it it doesn't actually care about the other count the reason for this issue is that use effect and react by default is comparing object references so it's saying hey is this person object reference the same as the previous person object and since this person is being defined right here inside of our function every time our function re-renders so every time we increment our age or other count it creates a brand new person variable and this brand new person variable is different than the previous person variable because they're two different objects so this use effect is always going to run every single time this use deep compare effect on the other hand doesn't care about object references and instead is comparing the exact value of these objects so since the value of this person object for example its age and name didn't change when we increment the other count it doesn't run this deep compare effect and the way this code works is super simple all we're doing is just keeping a reference to our references here we're just using low dash to say hey are these things equal and this is going to compare the actual values of these objects and not the objects themselves so it's going to go around that referential equality normally to get around this you would need to you know wrap this inside of a used memo so you could say use memo here wrap this entire thing inside of that and then we could say oh you know what our dependencies are going to be our age this would solve this issue and now our use effect and our use deep compare effect would work exactly the same but sometimes this is kind of a pain especially if you have a lot of different dependencies so using deep compare effect is an easy way to get around this issue and something that you're going to find yourself using all the time now the next took i want to talk about is going to be a lot simpler it's a really easy one and this one is for dealing with events and this is called the use event listener hook so let's just comment this back in so we can render this out and you can see it just says last key and all this does is when i press a key it just tells me whatever the last key i pressed is so i press d you can see it renders out a d so let's actually look at this hook real quick we'll look at the component first as you can see it's really straightforward we just have state to store the key and we say use event listener we're listening for the key down event and when this runs we're getting the key from that event and we're setting that to the key and just rendering that out to the screen let's look at the use event listener hook real quick it's also pretty straightforward we pass in the type of event and the callback as you can see here key down is our event and our callback is right here and then we have an optional third parameter which is an element and this is just the thing we want to use an event listener on by default this just renders for the window so it's going to add the event listener to the window but if you want it to be on a specific element you can also pass an element in then all we're doing is we're just saving our callback here as a reference and updating it when it changes this just makes sure we don't have any additional re-renders we don't need and then our use effect all we're saying is hey if our event or our element changes re-render this otherwise just come in here create a handler which is going to be our callback and then we want to add an event listener for that callback and then remove it anytime that this information changes so all we're doing is just adding an event listener to the element that we care about and removing it when we no longer need it super straightforward but this is great when you need to do things like window resizing or you need to do things like key presses or mouse moves or hovers and all that additional stuff writing out all this code every single time is kind of a pain so having this simple hook makes it so much easier now this next hook i want to talk about is definitely going to be my favorite of the five that i'm covering and this is one called use on screen so let's just render this out real quick and i'll show you exactly what's happening so as you can see we have a header and as i scroll down there's a bunch of text and then we're going to have a header too and you'll notice as soon as header 2 becomes enough visible on the screen it's going to pop this text visible next to it and what we're doing is we're checking hey is this thing on the screen if so then run some code so if we come over here to use on screen we'll look at the component first you're going to see we say use on screen we pass it the reference to the thing we care about which in our case is this header 2 reference and we say when it is 100 pixels above the bottom of the screen do something if i change this to v120 for example you can see now that that is appearing 120 pixels above the bottom of the screen and we could also change it to zero pixels so we'll say zero whoops pixels just like this and now as soon as it becomes visible it's going to have visible on it because it's now zero pixels on the screen so it's always going to have this visible show up as soon as it shows up on the screen let's just change it back to negative 100 so we can see how this is working where it comes onto the screen and shows that thing so now let's go ahead and look at the code for use on screen this is actually really simple all we're doing is wrapping a use effect around an intersection observer this is a built-in technology in the browser that allows you to see when something intersects the screen essentially we're saying hey when this element is on the screen what we want to do is we want to set is visible to true or false depending on if it is far enough onto the screen that's this root margin by default 0 means as soon as it becomes visible then it's going to be set as visible otherwise we can change it to like a negative value so it has to be on the screen for a while or a positive value where it's saying hey when this is 100 pixels away from being visible then we want to mark this thing to be set as true and that's all this is doing it's just saying is it visible is it not visible and it's just returning that value down here super handy because this code is kind of messy it's a little bit clunky to write every single time but using this simple one liner is so much easier to work with and this is something you're going to use all the time if you have like infinite scrolling you need to lazy load anything at all it's super useful for all of that and this final hook i want to talk about is another really simple one that piggybacks on some of the other hooks we've talked about and this is called use window size so let me just render this out to the screen real quick so we can see what we're working with and this use window size component is just going to come right here it just says hey use window size it gives us a width and a height and we're just rendering that to the screen and as this window size changes you can see it's rendering on the screen over here for the new updated size so if we look at the component it's also super straightforward remember we already have this use event listener set setup so we just say hey whenever we resize our window just set the window size to the new width and the height of our window and we're just going to return that to the user so we're able to piggyback on some of these other smaller hooks we created to create more complex hooks and that's the beauty of all these really simple hooks you can just kind of mix and match them together to create really complex logic by using just a small little pieces of hooks at a time and i absolutely love that if you enjoyed this video you definitely need to check out part one and two linked over here that's going to cover 10 more amazing custom react hooks with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 10,598

Rating: 4.9410028 out of 5

Keywords: webdevsimplified, react hooks, react custom hook, custom hooks, react custom hooks tutorial, react hooks tutorial

Id: Ix_xeCuS4XA

Length: 9min 13sec (553 seconds)

Published: Sat Oct 02 2021