React Hook useRef and forwarding refs with forwardRef

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

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

50% 1

useRef Hook and forwardRef to pass reference to a reactjs Component. To access html element and focus() Forwarding refs to DOM components
#react #useRef #forwardRef
Help the channel via patron and buying merchandise
* / techsith
* teespring.com/stores/techsith...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* ru-vid.com_vide...
Note: use translate.google.com/ to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.

Наука

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

14 июл 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@arpielen 3 года назад

You just made me a heroine on my internship program 🤩 Yeaeaaah, thank you!

@akashpal9691 3 года назад

A quick and precise intro to why forward ref is needed.

@stephenfairris4246 4 года назад

Was looking for a quick review of refs in React using hooks, and this video was exactly that. Well done :)

@janwillem4495 4 года назад

Same here! This video is a really good way to learn about the refs :)

@akashthoriya 4 года назад

waiting for the perfect one and this arrives!

@clbmribas 4 года назад

Nice tutorial, direct to the point and well explained. A relief after hours of frustrated research. Thank you.

@geraldf6735 5 лет назад

A clean video again from you sith... thank you

@KyleKatarn145 2 года назад

Awesome. I've just been passing the ref down as a prop because I didn't know any better, but I'm thinking this would work so much better. Thank you!

@alex-front-end 5 лет назад

Awesome as usual. Cheers!

@cpmcmanaman 3 года назад

Wow Techsith is good. Wish I had stumbled in him first in learning React Hooks....a lot of hours spent watching people try poorly rehash the examples/explanations on the Reactjs homepage. Love Techsith!!

@robbieyy 4 года назад

I am so happy ... I just arrived at the point I found out you can't give ref's to function components.... but now I can. :-) Thanks

@gopideveloper4375 5 лет назад

Well explained. Thank you

@trangnusi13 Год назад

The best explanation of forwardRef that I found. Thanks a lot!

@gokayarpaci3872 5 лет назад

keep on sith. you are doing nice work

@ShubhamMishra-mz4zw 9 месяцев назад

Thank you so much. This is probably the best explanation on useRef and forwardRef

@gabrielfono844 2 года назад

this is one of the best developers I have ever accounted in my career. I learn class and functional component for free here. I learn about javascript advance concept like closure , oop and etc. I prepared for my mid-level React position thanks techsit. God bless you.

@MarshallBanananana Год назад

Best explanation out of four, I watched so far.

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

explained clearly. It is really helpful. Thank you

@ahlambeyoud1709 4 года назад

techsith, you deserve millions of subscribers!! always clear and comprehensive tutorials...keep up the great work you do we truly appreciate it.

@Techsithtube 4 года назад

Thank you so much 😀 Keep on learning!

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

Thx for the tutorial now i understood why we need ref and forwarding ref

@mahendranath2504 3 года назад

Thank you for clarifying 👍🏼

@Techsithtube 3 года назад

Happy to help!

@artemsergiyenko1086 2 года назад

Brilliant! Thank you

@AndrewOnTestingCars 4 года назад

Great video thanks very much !

@deepabhatt2621 2 года назад

Thank you soo much for this video Hemil., Finally, it's your video that makes my day.

@theprimecoder4981 2 года назад

You helped me a lot I have been facing a issue with ref for weeks now, but it just that I had ref in the the first argument in the object destructive and not in the second argument

@boopfer387 2 года назад

Excellent example thank you sir!

@datoubi 4 года назад

thanks! taught me exactly what I wanted :)

@Techsithtube 4 года назад

Great to hear!

@showduhtung 4 года назад

thanks this was a great video!

@jilherme 2 года назад

Great video!!

@J-ko8ig 3 года назад

Helped me a lot .. thank you 👍

@krishnayallapanthula 5 лет назад

you explained it very well..

@doogdoogdoogdoogdoogdoog 2 года назад

Really useful, thanks so much.

@daemperador123 3 года назад

Thank you, your video helped me a lot

@Techsithtube 3 года назад

Glad it helped

@JaneDoe-ui2bj 2 года назад

this video was sooooo helpful.. I was stuck on the child component ref for hours.. :) -- thank you!!!!!!!

@abdulfatah66 3 года назад

thank you so much. very clear and intuitive way of teaching

@Techsithtube 3 года назад

Glad it was helpful!

@veeracs 4 года назад

Nice one! just in time...

@sandeshbirwadkar2384 4 года назад

Nice video!

@psmolak 3 года назад

Clear explanation, thanks!

@Techsithtube 3 года назад

Pawel, Glad it was helpful!

@nanasarathi 4 года назад

Awesome... Well explained... Thanks

@Techsithtube 4 года назад

Thanks for watching Narendra.

@kirancm5165 4 года назад

Best Explained

@gosinP 3 года назад

Thank you.

@Fatima-ie5kj 2 года назад

nice - thankyou

@phamvietnguyenduy6904 Год назад

Thanks, it's very helpfull

@brenocristovaorocha 3 года назад

very good!

@himanshushekhar3694 3 года назад

awesome

@rajshrishrimal2653 3 года назад

Superb video 💥💥💥

@rajatshrivastava879 3 года назад

Best on Refs.

@abdelrahmanmagdy8946 3 года назад

thank you alot

@Seacrest. 3 года назад

thank you

@mi-2453 4 года назад

Thank you very much..

@rtorcato 4 года назад

when you click or keydown the event that is passed contains a reference called current target. No need to use refs for forms. To set focus for first element in form you can use ref.

@rkgrap 2 года назад

You made this so simple, thank you so much

@goffredo81 4 года назад

Nice video, how would you implement the focus based on the length of the text and not on the key event? Thank you.

@kranthikumar5215 2 года назад

Superman 🥰

@bhushanjagtap7382 4 года назад

Thanks..

@CameronWilby 4 года назад

Great job, thank you!

@Techsithtube 4 года назад

Glad it was helpful!

@shireenkhan7569 2 дня назад

11:47 forwarded ref

@the_street_coder4433 2 года назад

which vscode theme did you use in these video?

@FrontLineXDS 3 года назад

Anyway to make this work with Typescript? the Input has type conflicts with what React.forwardRef() expects as an argument

@msea5654 3 года назад

is there possible way to explain to forwardRef when you have a dynamic list and you want to target the child component to change some property when an event is triggered

@gabrielfono844 3 года назад

thanks so much do we need to learn class component again because I am building all my application with hooks and I was wondering if I might get asked about class component at my upcoming interview just curious to know what yoiu think since I learnt class and hook from your channel thanks I look forward to hearing from you back.

@Rahulsecret 3 года назад

Just a little bit more context around forward ref in practice side would have been great... Otherwise its awesome

@egilmorstu 4 года назад

what vs code extension that convert => into arrow?

@azharponani 3 года назад

Hi What abt using multiple refs for the same element or component... Like one for local use within the component.. And other for forwarding to the parent component? Is this possible?

@newsentertainment1550 3 года назад

1000th like

@F4ILCON 3 года назад

What if you have huge form, with multiple inputs, what is the best practice create useRef and functions for each element, that does not seem practical, any ideas?

@maheshmahi5455 3 года назад

Hi sir, I have a case where i used connect method from redux and made a component with React.forwardRef and at the same time i made this component connected to store via this connect method and when i pass a ref to this component actually im unable to access that ref, i know its kinda HOC and how to get that ref from connect ?

@persoulrpg 4 года назад

I don't really get the point of forwardRef since you can simply pass ref using different property name, eg. myRef and you don't really need no fancy forwardRef for that.

@saitejagatadi9711 3 года назад

Hemil, Can you do a short video on Higher Order Components that uses only function components

@mannumannu9200 3 года назад

Most developers like render props & custom hooks instead hoc because it's hard to track code when using hoc

@sumeetprajapati15 5 лет назад

Please share your views on, what's the future of php with javascript growing so rapidly.

@Techsithtube 5 лет назад

these days , php is used for smaller sites , but for any thing enterprise level , its usually something else. JavaScript is growing more and more.

@cody._.--._.--. 3 года назад

I saw another video that says useRef just holds any value you want whether it be an object or number or whatever. How is that different than useState? Could you store the field ref in state? On the field: ref=>{(ref) => {setMyRefs( ... spread stuff, myRefs.firstName: ref, next state blah )}}.

@SheikhAmeen Год назад

When update a state value, the component re-renders. When you update a ref value, it doesn't trigger a re-render.

@shibnathroy106 4 года назад

Sir Love your content. *Video Request :* Can you please make a video on your youtube journey and how it has changed your life? I am not asking about financial gains. The positive changes that happened in your life for example opportunities, etc. Thank You.

@muscaiu 3 года назад

What if i want to pass ref from a hoc to a Component?

@vignesh_m_1995 2 года назад

Why did it fail when we pass the refs through usual props to the child component? Why do we need forwardRef instead of passing it as usual props?. Any specific reasons for that??

@kishorepantra9769 2 года назад

here we are exporting forwardInput from input.js file but in app.js we are importing input not forwardInput how is this working

@saurabrakshit405 Год назад

Can you bother a little to make a vedio on how to send refs from child to parent , it will be appreciated a lot .

@andrews13 Год назад

5:30

@alexcaissy3257 3 года назад

Just noticed a simple thing, could you have done one function for the onKeyDown handlers, and pass the ref as a parameter? Then in the function, just do a switch on the param! You wouldn't have to rewrite the same function three times !!

@temzeks 2 года назад

Maybe he did it so it would be obvious to viewers. Tutorials do not need to follow DRY principles to explain things like this

@nickshotts3988 2 года назад

You have an accessibility issue here. Hitting enter on a form field is expected to submit the form, NOT proceed to the next field. This is a good tutorial on useRef, but it is incorrect in terms of accessibility. You can learn more in the MDN docs.

@TusharBorawake 4 года назад

Hi, Can you please make video in which parent component can have access it's child component and grandchild component methods. I was stuck in my real time project. Using react hooks and class component.

@Techsithtube 4 года назад

Tushar , I do have a video on component communication which explains just that. Its using classes but the concept should be the same.

@shyamsoni5389 3 года назад

Hi, I am using this.props.history.push({ pathname:`some path`, state:{ object :object} }) ; on handleSubmit click And reading the data into routed component like this.props.location.state.objectName.field This is working fine when I am using BrowserRouter even when i refresh the page i get the values on page BUT when I am using Hashrouter and I refresh the page I get error saying Can not read properties of undefined Please help

@Techsithtube 3 года назад

HashRouter doesnt support certain things . I would suggest using BrowserRouter instead

@jiwachhetri4165 2 года назад

What if the function Input was within the App.js file?? How can you export without using export default??

@Techsithtube 2 года назад

you dont always have to use export default. you can simply use export but in that case you have to have import using "import { module } from " syntax

@abc7089 3 года назад

50/5000 Why couldn't it be done that way?: ... return( ) and inside Input: const Input=({firstNameRef)=>{

@maheshveez627 4 года назад

Could you make a udemy a course on MERN stack

@Techsithtube 4 года назад

Next week i am releasing a course on React Hooks. I might go for MERN stack afterwards.

@maheshveez627 4 года назад

@@Techsithtube Thank you sir

@ashishmangla221 4 года назад

why my page got refresh on enter ?

@Techsithtube 4 года назад

Share your code. it should not have refreshed.

@singlebw4065 3 года назад

stepBelow = (e, numInp) => { let count = 0; if(e.key === 'Enter'){ for (let i of e.currentTarget) { count++; if (i.name === e.target.name) { if (count < numInp) break; else count = 0; } } e.currentTarget[count].focus() } }