Check out a free preview of the full Intermediate React, v3 course:
The "useImperativeHandle" Lesson is part of the full, Intermediate React, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates how to use the useImperativeHandle hook in conjunction with forwardRef and React.focus to allow the child component to customize the value given back to the parent component. The useImperativeHandle hook is typically used by library authors to allow users to call internal functions.

Get Unlimited Access Now

Transcript from the "useImperativeHandle" Lesson

[00:00:00]
>> Let's talk about use imperative handle. So I'm going to use imperative handle, I'm going to scroll down here and I'm going to venture to say that unless you are a library author, you will literally never use this one. I want you to know about it that it exists but this is really only useful if you're creating like a library.

[00:00:24] So I feel like you're an SDK author at Microsoft and your entire team consumes your SDK, you might use this If you are just writing an application, for airbnb.com, you probably will never use this. So let's talk about this particular, good piece right now, if I have a address here, so a city and a state in the United States so I can put like Salt Lake City, and I can click Validate form.

[00:00:59] It's gonna say that's a valid form you put in a valid city so set's say I forgot Salt Lake City and I just did that. I want to turn this red, right or if I come in to settle and then I put Washington, it's gonna say, that's not right.

[00:01:19] I expected a two letter state, right, so here's my code that does that kind of validation. I have an elaborate input, that's this one and I have a form, which is the imperative handle component that has two elaborate inputs inside of it. Now what I wanna be able to do is like, hey, I want to turn your border red if someone something doesn't validate on that particular thing.

[00:01:52] But all that validation logic is going to happen here in the imperative component and I want to be able to inform the elaborated input, because it has no functionality in and of itself. It's just like it just shows what the user is putting in and it has some, display stuff, but none of the validation logic lives inside of the elaborate input itself.

[00:02:12] Because notice here, Seattle and Washington, they're both just elaborate inputs so how do I make those show errors or not show errors? Well, the way you can do that is something called a use imperative handles so I have this hook here, basically returns a function that that a parent can call to say, hey, focus, right?

[00:02:40] And that's another part here, that's actually the more important In part. Let's say I put in nothing here and I clicked here on and I clicked on validate form. I want the focus of the user to jump from here to the one that's wrong so I click Validate Form.

[00:02:57] Notice that my focus jumped there and I didn't do anything, right? It just jumped over there, that's not something that the parent could do. The parent can't reach into the child and say, Hey, focus on this, input element that exists inside of you. That's something that the child has to do in and of itself and the only way you're actually able to do that is with this imperative handle.

[00:03:21] So this focus thing here, I use another ref here, so where's my ref? My input ref right there, right? And then that is placed on this input element here with the input ref, right, so that's going to refer to this input for each individual one right. The Seattle has one and the Washington one here, has one as well.

[00:03:46] Then I had this imperative Hana which allows me to create a function on this component. Okay, so now this function on this component has a functionality called focus, which allows me to call the focus on the input and I then pass that to the parent. So I had this elaborate input for this imperative handle which is being rendered here and then it has two refs, a city one and a state one, I'm putting those refs on the city one and the statement but notice that these reps are going on custom components, right things that I made.

[00:04:28] It's not going on an input or a div or an h1 or anything like that, it's going on what's something I made? This allows the child to modify the ref that's handed back to the parent, so the child takes as soon as like, okay, this state l now has a function called focus that you the parent can call imperatively.

[00:04:46] That's where the imperative part of the handle comes from, so now I have this functionality of validate which I definitely did not copy and paste directly off the Stack Overflow. And I can call city L, which is the wrath right? Current dot focus and I'm calling this from the parent, so the parent is actually calling a function on the child with the child created.

[00:05:13] Now, you might question like, why would I ever do this? And the answer is you wouldn't, right typically, you would just Implement all this code yourself. But if I'm a library author, and I make a MPM install elaborate input that you can install, I need to provide you away to call focus on this elaborate input ,right?

[00:05:32] So this is made for library authors but it is something that react does for you ,make sense? Okay, it kind of makes sense I mean, that's that's good enough for me, it's good enough that you kind of know that it exists. It's going to be more important that sometime you're going to be.

[00:05:55] Like NPM install an elaborate input and then be like, hey, you need to put a ref on this so that you can call this function. This is why, that's the key part for you to take away is how to use these not necessarily how to create them.