Learn React Hooks: useImperativeHandle - Simply Explained!

In this video we will learn about React hooks, starting with useImperativeHandle. This powerful React hook will allow you to expose certain functions from a child component to the parent component via a ref. It is extremely useful in situations where you want to call some behaviour in a child from a parent without explicitly providing a callback from the parent. In this video, we look at all of the use cases for useImperativeHandle and how it works!

In this new React world, hooks are here to stay, so it's best to learn them! In this tutorial I demonstrate the useRef React hook, and I explain it very simply and in a way that is easy to understand. Enjoy!

[firekeeper]

I searched many videos about this hook on my native language but these guys couldn't explain it simple. Thank you!

[yitzchaksviridyuk]

Dude are you kidding me? I didn't know this existed, so at one point, I actually implemented an event bus class just to allow the parent to rerender specific children. I really didn't want to make the class, since I didn't want to start doing things that weren't "React-y" which could confuse other devs; but I didn't think I had a choice. I also did a ton of searching, but maybe I didn't ask the right questions, since I only kept seeing people say that I need to lift the state up etc. Either way, thanks a lot for this video. I kept thinking, "It's so weird React doesn't have a built in way to solve this issue." Good to know that isn't the case. 😄

[artursavchuk]

omg, I have thought so many times about this functionality, and I was so disappointed that react can't do it. Thank you so much for this information, this is very useful 👍

[codecleric]

A senior engineer at my job implemented a solution with this to solve a problem I was racking my brain over. It's really powerful and good to know about. This needs to be common knowledge

[faraonch]

I should have watched this video BEFORE my last two nights! Well explained!

[tomasburian]

I have never seen this hook before and I just ran into it in my company's project. This video helped me a lot to get up to speed. Thanks!

[pauloviniciuscoral]

And this also helps with the Single responsibility principle.
Great video.

[RKD_]

Bro I love your content it’s amazing, and I just check your page I really love how you put group name of video it’s really amaze me the dedication you put to structure these videos. I really appreciate your work and I really learn more through your contents. Thanks Brother, Happy learning 😊

[smokinjoe]

holy moly, this is such a great react hook!

once again, you teach me something new every day

[opencode]

Really love this type of videos, basic css but big functinality explanation. thank you for your effort

[SudhanshuShekhar-hhuj]

The third parameter of the imperative handle is the dependency array. Include state values you want to track here, like logging the name "Thor" from a parent component defined in a child component.

import { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react'
interface refProp{
logname:()=>void
}
function Imperitive() {
const nameRef = useRef<refProp>(null)
return (
<div>
<Child ref={nameRef}/>
<button </button>
</div>
)
}
const Child = forwardRef<refProp>((_, ref:Ref<refProp>)=>{
const [name, setName]=useState("")
function logname(){
console.log(name);

}
//this funciton will reamin same after firt render so to run agin
useImperativeHandle(ref, ()=>{
return{
logname
}
}, [name])
return(
<>
<h1>name is :{name}</h1>
<input
</>
)
})

export default Imperitive


Thank you, Cosden. One day, I want to be a developer like you, so sorted with the knowledge you have. Respect!

[LobbanVlogs]

I was going crazy figuring out how to get this working with HTML Elements. Second part of this video was crucial for me since I wanted to get my types correct. I was mixing up the Parent and Child refs. Thanks Bredda!!!

[pallavidas]

Amazing.. you made it so simple to understand! Thank you.

[jingyazeng]

omg This is really helpful! THANK YOU!

[monterourena]

Thank you so much for sharing this incredibly useful hook! I wish I had known about it sooner. Your content is a masterpiece

[ichigoplayss]

Great video, I've been following your TikTok for a while and learned much from you. I just realized that I haven't subscribed yet. Keep up the good work

[TheHumanistX]

lol love the slide-in of the subscribe pitch ;)

[clasesutnfrc]

02:38 Expose child's method to parent
03:34 Expose child's method to parent | useImperativeHandle

[icoderdev]

Cosden ❤...was out for a while. Hope i didn't miss alot.😊

[a.murshed]

Great tutorial as usual. I have a question here, what is the difference if the child function is defined with ForwardRef or without?