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

Brian introduces the useImperativeHandle hook, which allows the child to expose a function to the parent.

Get Unlimited Access Now

Transcript from the "useImperativeHandle" Lesson

[00:00:00]
>> Brian Holt: I will venture to say that you will never use this one. This is mostly for library authors. I just want to let you know that it's out there. I've told you that data only flows one way, in react it goes from parent to child, and then that child to that child, and child to child, right?

[00:00:13] So it only moves down, it doesn't go back up. This is how you flip it on it's head. You can actually have a child control the parent. So here I have from that I have Seattle, Washington and if I delete and click validate form it'll make that red and then refocus on it, right.

[00:00:32] So I have an elaborate input here and then I need to be able to focus on that right. Which is something that the parent would do, right? So this is actually allowing the child to expose a function to the parent so the parent can say hey, focus on this, right?

[00:00:48] So that's what this is doing here with useImperativeHandle. I'm not gonna get too much into the weeds of the details here because it's just not that interesting. But you're welcome to dig in through this code and figure out more of what it does if this is useful to you.

[00:01:04] So what this is doing, this useImperativeHandle, is it's returning this function here called focus. And now the parent call focus on this elaborate input, right? And then I'm doing that with this forwardRef function, which is basically saying, hey, if someone makes a ref on me I'm going to make functions available on this particular item, right?

[00:01:28] So now if I go down here, notice that I have a cityEl and a stateEl and I'm using ref on both of those. And then if I go down in here, they have a ref here of stateEl, and cityEl, right? And then I have here this validation function which is law I found it on Stack Overflow [LAUGH].

[00:01:50] This will validate a city and this will validate a state. So if the city is not valid, right, then it'll say cityEl.current.focus, right? And that focus function came from here. So again, I really don't think you'll be writing very many of these. But a lot of library authors will be writing these things for you,

[00:02:11]
>> Brian Holt: Make sense? Same thing here. If I delete this, and you put S here and then click validate form. It'll focus on that one so that it'll actually capture the focus there.
>> Brian Holt: And that's it, that is all of the hooks that you have. There are no more.

[00:02:32] There was like one more, but I think they deleted it because it was so confusing. These are the not confusing ones.