Learn React Hooks: useImperativeHandle - Simply Explained!

Подписаться 87 тыс.

Просмотров 17 тыс.

50% 1

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
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!

Опубликовано:

22 авг 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 56

@codecleric4972 2 месяца назад

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

@firekeeper7461 8 месяцев назад

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

@pallavidas2648 6 месяцев назад

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

@faraonch 4 месяца назад

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

@smokinjoe3000 4 месяца назад

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

@monterourena 6 месяцев назад

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

@lukasluftlaufer1093 10 месяцев назад

Amazing. Thanks for the great explanation!

@opencode1 Месяц назад

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

@user-tu1lx6vz9p 10 месяцев назад

Great content cosden

@ytra1001 6 месяцев назад

Thanks you make things look simple

@pauloviniciuscoral1128 3 месяца назад

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

@swdotdev 10 месяцев назад

Great content again! Thank you very much dude!

@artursavchuk2363 2 месяца назад

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 👍

@yitzchaksviridyuk932 10 месяцев назад

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 10 месяцев назад

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 10 месяцев назад

@@cosdensolutions I hear man. Thanks again!

@prashlovessamosa 10 месяцев назад

Thanks for making this.

@PalladinGOLD 3 месяца назад

Your videos are awesome. Thanks

@ichigoplayss376 9 месяцев назад

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 9 месяцев назад

Thank you for the kind words!

@elozinoovedhe 8 месяцев назад

Well explained!!!

@bismarckkaine2700 9 месяцев назад

Great job homie

@icoderdev 9 месяцев назад

Once in a life time ❤❤❤

@hikki2566 2 месяца назад

Thanks!

@icoderdev 9 месяцев назад

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

@badishammadache2922 10 месяцев назад

great video

@JacksonDiKey 9 месяцев назад

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

@prafullkumar6369 2 месяца назад

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

@cosdensolutions 3 месяца назад

Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react

@TheHumanistX 9 месяцев назад

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

@cosdensolutions 9 месяцев назад

☺️

@a.murshed8136 4 месяца назад

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

@vasiapypochkin3241 3 месяца назад

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

@Vishal360 5 месяцев назад

Straight to damnn mind

@Vishal360 5 месяцев назад

Subscribed 🤗

@cheikhkebe3735 10 месяцев назад

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

@cosdensolutions 10 месяцев назад

❤️

@ExtraTurtle 4 месяца назад

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?

@clasesutnfrc8699 4 месяца назад

02:38 Expose child's method to parent

@MEZOMEZO2011 10 месяцев назад

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 10 месяцев назад

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

@emaaadelgado 2 месяца назад

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

@nguyenvannhat5114 3 месяца назад

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

@cordial 8 месяцев назад

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

@cosdensolutions 8 месяцев назад

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

@snatvb 8 месяцев назад

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