React Hook useRef and forwarding refs with forwardRef

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/...
Follow me for technology updates
/ techsith
/ techsith
/ techsith1
/ 13677140
/ patelhemil
Help me translate this video.
www.youtube.com...
Note: use translate.goog... to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.

[@arpielen]

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

[@akashpal9691]

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

[@stephenfairris4246]

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

[@janwillem4495]

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

[@cpmcmanaman]

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

[@gabrielfono844]

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.

[@clbmribas]

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

[@robbieyy]

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

[@KyleKatarn145]

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!

[@ShubhamMishra-mz4zw]

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

[@mahendranath2504]

Thank you for clarifying 👍🏼

[@Techsithtube]

Happy to help!

[@radbrad5580]

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

[@trangnusi13]

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

[@ahlambeyoud1709]

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

[@Techsithtube]

Thank you so much 😀 Keep on learning!

[@MarshallBanananana]

Best explanation out of four, I watched so far.

[@akashthoriya]

waiting for the perfect one and this arrives!

[@geraldf6735]

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

[@theprimecoder4981]

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

[@nirmalhasposted]

explained clearly. It is really helpful. Thank you

[@deepabhatt2621]

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

[@gokayarpaci3872]

keep on sith. you are doing nice work

[@gopideveloper4375]

Well explained. Thank you

[@JaneDoe-ui2bj]

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

[@astraguardian]

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

[@Techsithtube]

Glad it was helpful!

[@AndrewOnTestingCars]

Great video thanks very much !

[@alex-front-end]

Awesome as usual. Cheers!

[@boopfer387]

Excellent example thank you sir!

[@artemsergiyenko1086]

Brilliant! Thank you

[@rajatshrivastava879]

Best on Refs.

[@veeracs]

Nice one! just in time...

[@J-ko8ig]

Helped me a lot .. thank you 👍

[@datoubi]

thanks! taught me exactly what I wanted :)

[@Techsithtube]

Great to hear!

[@showduhtung]

thanks this was a great video!

[@rajshrishrimal2653]

Superb video 💥💥💥

[@sandeshbirwadkar2384]

Nice video!

[@krishnayallapanthula]

you explained it very well..

[@persoulrpg]

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.

[@phamvietnguyenduy6904]

Thanks, it's very helpfull

[@kirancm5165]

Best Explained

[@gosinP]

Thank you.

[@psmolak]

Clear explanation, thanks!

[@Techsithtube]

Pawel, Glad it was helpful!

[@Fatima-ie5kj]

nice - thankyou

[@Rahulsecret]

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

[@rtorcato]

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.

[@doogdoogdoogdoogdoogdoog]

Really useful, thanks so much.

[@daemperador123]

Thank you, your video helped me a lot

[@Techsithtube]

Glad it helped

[@jilherme]

Great video!!

[@kranthikumar5215]

Superman 🥰

[@Seacrest.]

thank you

[@himanshushekhar3694]

awesome

[@abdelrahmanmagdy8946]

thank you alot

[@rkgrap]

You made this so simple, thank you so much

[@nanasarathi]

Awesome... Well explained... Thanks

[@Techsithtube]

Thanks for watching Narendra.

[@goffredo81]

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

[@nickshotts3988]

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.

[@mi-2453]

Thank you very much..

[@gabrielfono844]

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.

[@brenocristovaorocha]

very good!

[@F4ILCON]

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?

[@FrontLineXDS]

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

[@msea5654]

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

[@vignesh_m_1995]

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??

[@azharponani]

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?

[@saitejagatadi9711]

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

[@mannumannu9200]

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

[@the_street_coder4433]

which vscode theme did you use in these video?

[@sumeetprajapati15]

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

[@Techsithtube]

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

[@muscaiu]

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

[@kishorepantra9769]

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 .

[@maheshmahi5455]

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 ?

[@TusharBorawake]

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]

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

[@alexcaissy3257]

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]

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

[@cody._.--._.--.]

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.

[@jiwachhetri4165]

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

[@Techsithtube]

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

[@egilmorstu]

what vs code extension that convert => into arrow?

[@bhushanjagtap7382]

Thanks..

[@abc7089]

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

[@CameronWilby]

Great job, thank you!

[@Techsithtube]

Glad it was helpful!

[@shyamsoni5389]

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]

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

[@shibnathroy106]

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.

[@singlebw4065]

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() } }

[@hariharanb201]

How can we do multilevel "forwarding ref" Parent

[@nikolay.kupstas]

Just pass this ref to your SubChild

[@ashishmangla221]

why my page got refresh on enter ?

[@Techsithtube]

Share your code. it should not have refreshed.

[@maheshveez627]

Could you make a udemy a course on MERN stack

[@Techsithtube]

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

[@maheshveez627]

@@Techsithtube Thank you sir

[@newsentertainment1550]

1000th like

[@shireenkhan7569]

11:47 forwarded ref

[@andrews13]

5:30

[@tipfertilizer4595]

techshitt

[@Pareshbpatel]

{2024-03-22}

[@kamleshkumar-vm8cj]

Not given a deep concept.. only he focused on English spoken language

[@nishantnimish7825]

forwardRef explanation was not good

[@animanoir]

rip my ears.