Learn React Hooks: useImperativeHandle - Simply Explained!

[@cosdensolutions]

Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc

[@firekeeper7461]

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

[@faraonch]

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

[@codecleric4972]

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

[@yitzchaksviridyuk932]

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. 😄

[@cosdensolutions]

haha yeah, it's not that popular unfortunately, and a lot of people don't know it exists. I myself only found out about it at the beginning of this year hahah

[@yitzchaksviridyuk932]

@@cosdensolutions I hear man. Thanks again!

[@tomasburian6550]

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!

[@artursavchuk2363]

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 👍

[@SudhanshuShekhar-hh1uj]

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(null) return ( nameRef.current?.logname()}>click ) } const Child = forwardRef((_,ref:Ref)=>{ 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( name is :{name} setName(e.target.value)}> ) }) export default Imperitive Thank you, Cosden. One day, I want to be a developer like you, so sorted with the knowledge you have. Respect!

[@pauloviniciuscoral1128]

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

[@AfifAlfiano]

Great explanation, thank you

[@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!!!

[@smokinjoe3000]

holy moly, this is such a great react hook! once again, you teach me something new every day

[@DamerlaPravallika]

very well explained

[@jingyazeng5834]

omg This is really helpful! THANK YOU!

[@farhadkhoshnoodi7954]

I saved this video... was awesome...

[@opencode1]

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

[@pallavidas2648]

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

[@rohansachdeva627]

super clear man!

[@ichigoplayss376]

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

[@cosdensolutions]

Thank you for the kind words!

[@TheHumanistX]

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

[@cosdensolutions]

☺️

[@ytra1001]

Thanks you make things look simple

[@camilo5821]

With context is so useful

[@icoderdev]

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

[@monterourena]

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

[@PalladinGOLD]

Your videos are awesome. Thanks

[@TausifShekh-j5x]

Great content cosden

[@prafullkumar6369]

Very nice video 👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏🤟🤟🤟🤟🤟 Love it. very use ful

[@icoderdev]

Once in a life time ❤❤❤

[@bismarckkaine2700]

Great job homie

[@a.murshed8136]

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

[@Txous77]

If I understand correctly, this would be kind of the opposite to useContext (where you pass a piece of data from up to down without prop drilling)?

[@ExtraTurtle]

If I put the entire "counter" state in the parent, it would make every child component re-render, even when It doesn't use that state does this also happen with useImperativeHandle? When you click the button that runs counterRef.current.reset() will it also re-render the entire parent component? or is this also used as React.memo of some sort?

[@prashlovessamosa]

Thanks for making this.

[@elozinoovedhe]

Well explained!!!

[@hikki2566]

Thanks!

[@lukasluftlaufer1093]

Amazing. Thanks for the great explanation!

[@swdotdev]

Great content again! Thank you very much dude!

[@CodingEnjoyer]

Impressive !!

[@clasesutnfrc8699]

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

[@vasiapypochkin3241]

Привет, в setCount можно было передавать callback, аргумент которого является prevState. для гарантии того что count является актуальным значением. p.s. спасибо за видео :D

[@MEZOMEZO2011]

I understood the concept but don't see how this will help in closed library components. Here you still needed to change the Counter component to be able to add the useImperative and accept the Ref as props. Or are you saying that the component in the library itself will have that set up by default?

[@cosdensolutions]

Yeah that's exactly what I meant! I didn't form it properly 😅

[@JacksonDiKey]

Cool stuff! Can u pls simply explaine how forwardRef working? it's a little bit tricky for use. Thnks!

[@emaaadelgado]

is there any way to detect the changes on the child from the parent? using this way..

[@badishammadache2922]

great video

[@nguyenvannhat5114]

Please help. My current in ref of parent always null.

[@Vishal360]

Straight to damnn mind

[@Vishal360]

Subscribed 🤗

[@Shanksther3d]

Really enjoyed this video, very instructive 🙏🔥🔥 keep going. Ps: isSubrscribed(true) 😂👍

[@cosdensolutions]

❤️

[@HAROLDDELROSARIO-j5c]

What if I pass the function as a property of the counter component? Is it better or not? Beginner nyehehe

[@cosdensolutions]

I go over this in the video :D

[@snatvb]

it's not so good concept as you think and makes inverted control that usually leads to a lot of bugs better is to create context and provide state with api from that useImperativeHandle needs to extends api of video tag for example, for make adapters

[@cordial]

Good explainer as ever. This seems rather anti-pattern, im not entirely sure in what instance it would be ok to use it.

[@cosdensolutions]

Yeah I get the anti pattern vibes but there are a lot of use cases! Most 3rd party libraries do it and also if you make some component you need to trigger from above this is great

[@saqibmuhammad7218]

what is meaning by cha-cha \

[@Ravi_Kaushik_Vlogs]

please creata a video of usecallback and usememo and react.memo with child component

[@cosdensolutions]

Already did ☺️

[@goblinmoblin4869]

I love you

[@joshuasingh854]

"This is counter-intuitive" - heh

[@cosdensolutions]

hahahaha

[@nikhiljadhav7666]

Speak slowly , You are speaking so fast cant change playback speed then it becomes very slow , speak slowly then you will get subscribe 😅

[@icoderdev]

Once in a life time ❤❤❤