Learn useImperativeHandle In 10 Minutes

[@BB_Harunya]

Short, concise, no fluff, effective examples Where do we pay this guy

[@sainathreddy1950]

There is an option super thanks just below the video. you can pay him using it.

[@jingyazeng5834]

Clear explanation and super helpful use cases. THANK YOU!

[@feynthefallen]

You know, I have used useImperativeHandle, I've used useRef, I've used forwardRef, but only because somebody told me "do it that way". I'd be mighty grateful if some day you posted a deep dive into Refs course that goes into the nitty-gritty of the concept of the humble ref and explains in detail what they are and how they are implemented. I found your video on the inner workings of Promises extremely helpful. Maybe you can do something similar for refs.

[@utkarshagrawal3640]

But don't u think there isn't much to refs, u already know the concept right?

[@Bluesourboy]

I've always thought of useRef like a smart container that always contains the thing you put in it because in React objects and elements are recreated every render and you want to have a reference to the same thing even if it's recreated.

[@Jaylaud]

My favorite tech teacher. Always on point

[@prasanths8960]

Thanks for your Awesome explanation..I understood it clearly.. support from India ❤

[@alekdemj]

I have watched many of your videos and I want to say you are great explainer!

[@vadimc4128]

Great video! The alternative way to do that is pass an object containing all the refs as a single ref. It works for me

[@shinmei971]

Very clear explanation, I might use this in my projects now, it's really useful !

[@zorro161]

bro thank you soo much you are the best the dots just connect when you were explian man thanks again man

[@jellyfith]

Chef's kiss. Well done! Appreciate the content

[@ashish_prajapati_tr]

your videos are very helpful. i already have found a use case of this topic by watching your tutorial. thanks.

[@Dan-p7f]

When I learn something new I'm always checking your videos about topics that I need. Thank you so much man!

[@nishaindesilva3738]

thanks! your tutorials really helps to understand about science in hooks in less cognitive overload

[@ternomhwange1079]

Thanks for these well-explained lessons. God bless you

[@daxdivv]

Next video: “Learn how to style your hair like Kyle”

[@ajsyt]

ps. Using CSS

[@sinc1802]

@@ajsyt I think it's something with the pseudo elements and linear gradient

[@discjockeydado]

He uses the useHairStyle hook

[@adtc]

It's Brylcreem

[@rayanfadhlaoui4823]

Thank you ! Very good/clear explanation.

[@AmanSingh-px5if]

Isn't then the usImperativeHandle just a wrapper around a useEffect which is modifying a ref? I could do the same thing by passing the ref value through the prop, and modifying it inside an useEffect in child component, any differences? or just syntactic sugar?

[@sahej97]

Ok, but then how would you accomplish the very last example of focusing different elements inside the child component jsx using your approach?

[@SuperAsfath]

Thanks for the amazing tutorial. I'm a non native English speaker, I watched this video with 0.75x speed. My suggestion is you may talk a bit slower, if somebody want, they can watch the video in higher speed.

[@PickleRiiiiiiick]

You're killing it man. Keep going.

[@samandarboymurodov8941]

Nice tutorial, thank you for sharing this!

[@akinjidesleek]

Yo I love this! Thanks Kyle.

[@mhthepsycho]

One question, you could make an object of these new references and do something like ref.current={focusButton:buttonRef.current.focus()}, what will be the problem in doing this/

[@ArunKumar-bs1pg]

Hi. Exact same coding I tried I am able to access those functions in my parent Component. But focus is not working what might be the reason.

[@damagelooper3102]

Hi, two questions: 1) Can you only use React.forwardRef on an export default? and 2) Can you use useImperativeHandle with anything other than refs? Thank you!

[@rahuls331]

Answer to your first question: Not necessarily. You can use forwardRef during the component declaration too. like below const App = React.forwardRef((props, ref) => { return 'hello' }) export default App. answer to your 2nd question: React docs mentions that the hook is used to customise the ref. I'm not sure what else you could do with it. What exactly are you trying to do?

[@JustSkillGG]

Very clear explanation. I have serious trouble though making useImperativeHandle to work with TypeScript

[@nkululekomthimkulu1248]

Did you figure it out? I'll give it a try.

[@igdev6095]

What is the difference between useTransition and useDefferValue hooks? I’t quite same

[@mxxo4239]

Neat. But just to make sure I'm understanding the use-case: essentially useImperativeHandle (along with useRef) allow you to call functions that live on a child component? As opposed to the old way of passing down a function as a prop where the function has to live on the parent and passed into the child?

[@awekeningbro1207]

yup, you can basically use this hook to expose functions that live inside child component to the parent and directly call them from there.

[@tuananhdo1870]

Life changing video!

[@free2idol1]

At the end, you said that this hook should be used only in specific scenario. Can you give example of when not to use `useImperativeHandle`?

[@NCS8331]

Superb ❤🎉

[@battle2n]

9:09 woof

[@bikashshrestha840]

wooo. i didn't know handling model was this easy.

[@lichaytiram9246]

It nice but i big problem is not working with input form - register isndie element block it.

[@DizzyDiz2006]

❤ these videos!

[@jawadsrour8490]

Awesome content!

[@rodrigonovais9624]

How can I "complement" the ref instead of override it?

[@ПетърТодоров-о7ф]

Clarified it, thanks

[@StilesClover]

hey it's not about the video but I would like to hear your professional opinion on this. So the thing is I'm in a little sport anime online community and well I post now since 2 years news only for the sports genre on a google sites. It works well and all but with over 170 news or better said pages it's getting kinda annoying for me and well because it's a google sites it doesn't have a lot of features but it's working. So I'm thinking now for months that I would like to switch but the question is should I use a specific website builder or do it myself? I guess the most important thing is that I really need a CMS because this would make it soooo much easier for me. I already found a site that uses CMS and it was great but the amount of CMS pages which they offered (Even with paid prices) was really limited so if I want to add more besides the news (shows, characters etc.) I would run out of space really fast :/ So any suggestions what I should do? Do it myself (but I would need a great tutorial because besides some basics I don't know much) or use a website builder (and which?).

[@davlasry]

I still don't understand what is wrong with doing it with props and what you mean when saying that that we will have to handle the focus state?

[@Pilosofia]

so this hook is when you want to pass a function from child to parent component. I use to do this by using context. but will be helpfull in the small and presentational components.

[@stem_school]

I'm interested in email validation for a new registered users, but it's not in your video list.

[@pawekoaczynski4505]

So basically, I can just grab a button with `.querySelector('.btn')`, and call the `.focus()` method, but that's not the React way to do it. So React provides use with the hook, to make the calls imperatively, kinda like in the vanilla JS. That's how I understand this

[@luisbalza3774]

That's EXACTLY what I thought when I learned about that hook

[@justin_t]

very nice!

[@Pareshbpatel]

The useImperativeHandle hook , clearly explained. Thanks Kyle {2023-11-09}

[@talkohavy]

Who gave you a dislike?? Stupid people on the internet... Anyway, great explanation bro! You're awesome! Love your content. Subscribed.

[@umang2226]

Thank you :)

[@Emerald13]

Thank you!

[@EnsYlmaz51]

very good

[@niZmosis]

That's bangin

[@harshan4989]

Nice 🎉

[@chrismartinez5711]

Not sure why, but for the second portion I had to wrap my modal ref function within onClick. Ex {modal.current.focus1()}} >Focus On input 1 It seemed like sometimes it would work without it, sometimes not, but going this route worked all the time.

[@HASHlRAMA]

I still don't understand what is the purpose of the hook. Can you not just set the ref to an object containing the three functions inside a useEffect for instance?

[@HASHlRAMA]

@@EverRusting Sure, but that's how refs work anyways. They use the property current to actually store the value. Which is what I meant to say when I suggested to modify the ref.

[@sahej97]

Have you tried that in a sandbox?

[@lkffkl7276]

@@sahej97 i have, it works

[@yigitruzgaruzun7289]

Thanks

[@zekumoru]

The `useImperativeHandle` hook reminds me of the `useReducer` hook in a way that rather than having a dispatch function passed down to components, we pass the actions up the component with the `useImperativeHandle` hook. Needless to say, I am not saying that `useImperativeHandle` behaves exactly the opposite of `useReducer`.

[@adtc]

Yeah, with useReducer you can let children control state in the parent. With useImperativeHandle you can let the parent control some attribute of children without changing or using props.

[@aarona3144]

"Was this a good video explaining useImperativeHandle?" "I can neither confirm nor deny this." Sorry, I had to. lol

[@Nyco3D]

Hold onto your hats, folks! 🎩😄 Get ready to transform that basic functional component into a luxurious class cruise ship! 🚀⛵ the glamorous realm of class-like functional components! 💃 But hey, you can just, use a class component! 😜

[@rabahalishah5124]

bro why didn't use forwardref in second example?

[@shawnlee6775]

All of that boilerplate when Svelte does that for free. Jeez.

[@sahej97]

I dont think it is advisable to use callbacks for the onClick event.

[@mukulr5171]

🔥🔥

[@medislamyah]

What i have to learn in JavaScript?

[@KamalSingh-qe5oi]

Goat

[@wagiewojak]

Coming from vue, i see that i will never start with react if i dont need to. So much bloated up

[@agsrf6479]

Bumbaclot

[@malikeththeblackblade2675]

I decided to prepend if(open) to the three buttons so I wouldn't get an error if open===false

[@adtc]

We can just import forwardRef directly instead of importing React.

[@yeahyeahduderooski]

Niiiice

[@SohailKhan-tc8uz]

Bro create a fresh React JS full course

[@ShelbyLuong]

this is like Vuejs defineExpose, right everyone ?

[@ZeusTheKid]

gangsta

[@ricardorien]

You should take the oportunity and insteand throw a stupid alert, just modify the value, or reset, or put a prefix. We are tired of basic tutorials for advance features like this one.

[@akshaychavan5511]

Succinct!

[@memeyardthoughts1197]

Here’s another useful custom hook you can create in react to detect user activity. It’s called useActive hook. Check it out - kzbin.info/www/bejne/n5PGdIyCa7CZZ5Y

[@blueblue9410]

what the fuck is going on

[@devfreemax3578]

Kyle you're crack

[@dpaulflavius]

learn how to use it and forgot right away 😁

[@anasouardini]

So, all of this so that you don't use an object inside of a Ref? After reading the docs, asking people on Discord and watching a video on KZbin, I still think it's an entirely useless hook. I just don't know why React team just like to confuse people!!

[@alii4334]

Awesome content!

[@doniaelfouly4142]

thanks