Learn React Hooks: useImperativeHandle - Simply Explained!

what's up guys there's cousin here welcome to the last use imperative handle hook tutorial video you're ever gonna have to watch I promise you if you watch this video and you watch it until the end you're not gonna have to watch another video on this ever again and you just might become a senior developer alright cool so we're now on my computer and let's begin we have here a simple counter app you have a count here that starts at zero and then a button to increment and a button to decrement the count if I press these buttons you're going to see that this application is fully functional this is the code for this application it's really simple this is the component that's currently running it's the demo component and it renders this counter component here if I go to the code for the counter you're going to see that it's really really simple we have our piece of State here called count and the function to update the state called set count and then we have our increment and decrement function and also this reset function that is currently not being used anywhere in this component and then we have the UI that renders everything that you've just seen now the problem that we have is we have this reset function here that as I've said is not being used anywhere in this component and we want to expose this to the parent we want to allow the parent in our case the demo component to reset the count of the counter from the outside so that means that this state here has to be reset through this reset function but not from within the component from the outside now this honestly is a little bit counter-intuitive because we're not used to thinking in this way when thinking about react we're usually taught to lift State up and put the state in the place that it's accessible to all the components that are needed so for example we should instead take this code and put it here in the demo and then paste it here and then pass all of the values that way but if you think about the code that we've just written and if we actually were to do this then we actually don't need to use counter anymore as its own component because what would be left encounter is just this UI that just handles this and we can easily just copy this and replace this entire counter here with the UI so doing it this way we eliminate the need to have a counter component and we put everything in this demo component now this is fine right there's like nothing wrong with this and this is actually what thinking in react means that's what lifting the state up means you're putting the state in the place where it's accessible to all the components that need it but there are some cases as you're going to see when you're actually working in bigger applications where you can't do this you can't lift the state upwards sometimes that's because of the component itself maybe the component doesn't make it really easy to do that and it's not feasible to actually lift the state upwards or you're using a third-party Library component in which you never have access to its inner State and so it's impossible to lift the state upwards so then what's the solution how do we expose this reset function to the parent well that's where use imperative handle the hook from react comes into play it's a hook that is really really useful and it's specifically built to allow you to expose different functionalities to parents and it's doing it through a ref so if that's the solution then let's implement it right now the first thing that we have to do because use imperative handle works with a ref we need to provide a way for this counter component to accept a ref through its props and the way that you do this in react is through forward ref so we'll do it Forward ref and then at the bottom here instead of doing export default counter we're going to do export default forward ref counter now this is going to work exactly in the same way but this is going to now give the ability to counter to accept the ref and so we have to update the type definition of the function to also accept the ref and this is going to be ref from react we're going to import this as well and then we're going to do any because I don't want to set this type just yet then the next step that we need to do is we need to import use imperative handle the hook from react and then we're going to write it here below we're going to do use imperative handle and now the first argument that you give to this is the actual ref which now comes from here because now counter is a component that will accept the ref and forward it so we're going to put ref here and then the second function the second parameter sorry is a function that is the function that will actually give access to all of the individual properties so let me just write this correctly it's going to be like this this is the basic form of use imperative handle with this now any parent that caused the counter component can provide a ref and then we'll have access to all of these exposed functions which for now are empty because we haven't yet put our reset but that's how user imperative handle works now what we have to do is actually make this so that we can pass this reset function to our ref the first thing I want to do is I want to create a type for a ref because it's always better to make it type so we'll do export type and that's going to be counter ref and I'm actually going to let copilot do the work because it's just easier that way and it's smart enough to know that this counter ref is going to take in a reset function then we're going to come here to where we put our any and now we no longer want any we actually want the counter ref right because now we have a type for it this is going to make it so that counter can only accept the ref that is of type counter ref and then if we scroll down you're going to see now that our imperative handle now has an error property reset is missing in our type because now it knows that this ref is of type counter ref so it needs to have a reset function so the only thing that we need to do is just pass this reset here like this and we are good to go so now with this the parent can call this counter can provide a ref of type counter ref and we are guaranteed that there's going to be a function called reset that we're going to be able to call in the parent so let's actually do that let's go to our parent and then let's first create our ref so we're going to do const counter ref that's going to be use ref from react we're going to import this and and then we're going to give it a type counter ref which we're going to import from my counter component and then we're going to instantiate this as null then we're going to make some space and we're going to pass this refer to our counter ref so ref counter ref and then we're going to create some UI to actually be able to use this ref so I'm just going to make a new button so button and that's going to be reset from parent and then in the on click function we're going to do the function that's going to call counter ref.current question mark because this is initially going to be null Dot and now you're going to see that our intellisense is going to be able to know that there's a reset function here because we've given it the proper type so we'll just put reset and then call the function and then save now with this if I now go back to our application you're going to see that we have our new button reset from parent and then I can press increment and I can press reset and it's going to reset it to zero I can decrement press reset and it's going to reset it from zero this reset is now coming from the parent which is really really cool and that's the beauty of using use imperative handle you can expose any sort of function any functionality to the parent and do some really really cool things with it like I mean this you can literally export any sort of function we could do something like check subscribe that's going to take a value that's going to be a type Boolean right and that's going to return void and now because I've added it now to the type we're going to have an error here that we're missing a function here so I can just add it to check subscribed and I can say value console DOT log value if I now go to the parent I can replace this reset function with check subscribed or intellisense is going to know that this is a valid function because we have it typed and it's also going to know that check subscribed takes in a parameter which is going to be I hope true because did you know that over 50 percent of you watching my videos are not subscribed honestly I think that's unfortunate because you are learning something really cool here I make really cool videos and I would really appreciate a subscribe so I hope that this for you is not true now there's one important thing that you really have to know about using imperative handle and you're going to run into this as you're using this and it's the case where you have to pass a ref to an actual HTML element if you look here at our counter we did not pass the ref further along to any Dom node we actually just used it here in our use imperative handle call but in this text input component we're actually passing the ref here and this ref if you look at the type here it is a different type it is HTML input element and not the type that we created it will not have access to reset or any other custom functions that you want to apply so in that case what you have to do is you have to create a new ref I called it your local ref and that is of the correct type of the actual HTML element which in this case is HTML input element and then you're going to pass that to the actual ref instead and not the ref from the parent the ref from the parent is the one that's going to get exported with all of these custom functions here and not the local ref and as you can see here we're using use imperative handle with the parent ref not the local ref and we're creating the functions on the parent ref but the functions themselves to actually do things with the local ref they are using the local ref because that's the only way that we can access this actual input and then in the parent it's literally the same code that we had before we create the ref we give it the proper type we render the actual component and pass it the ref and then we use the ref in the same way as we had before if I now go back to our application we have here let me just clear the console we have here our new app with a text input I can type anything in here and res set from parent is going to reset it just as we had before that's the power of use imperative handle and it's a really really useful Hook when you can't easily lift State up it allows you to create a ref expose all of its functions and then do some really really cool and useful things with it cool so there you go just like that you're never going to have to watch another video on use imperative handle ever again I told you if you enjoyed this video you can click this to subscribe it would really really help me out a lot you can also click here to watch a different video of mine which I'm sure is really really cool if you still haven't joined the Discord honestly what are you doing you're missing out on so much value it is the best resource if you're trying to learn react which I can only assume you are if you're watching this video it's the first link in the description I would highly highly recommend and with that being said my name has been Darris cousin this is causing Solutions thank you so much for watching and I will see you all in the next video ciao

Channel: Cosden Solutions

Views: 7,542

Keywords: react tutorial, react crash course, react developer, learn react, react hook, react hooks, react hooks tutorial, useeffect hook, programming tutorial, react hooks explained, computer science, tutorial for beginners, react component, learn programming, web development, frontend development, coding for beginners, simple code, easy programming, useImperativeHandle hook

Id: ndVIEMasBl8

Length: 9min 53sec (593 seconds)

Published: Wed Aug 23 2023