React Hook useRef and forwarding refs with forwardRef
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- 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.
You just made me a heroine on my internship program 🤩 Yeaeaaah, thank you!
Was looking for a quick review of refs in React using hooks, and this video was exactly that. Well done :)
Same here! This video is a really good way to learn about the refs :)
A quick and precise intro to why forward ref is needed.
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!!
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.
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
Nice tutorial, direct to the point and well explained. A relief after hours of frustrated research. Thank you.
Thank you for clarifying 👍🏼
Happy to help!
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!
Thx for the tutorial now i understood why we need ref and forwarding ref
A clean video again from you sith... thank you
waiting for the perfect one and this arrives!
Thank you so much. This is probably the best explanation on useRef and forwardRef
The best explanation of forwardRef that I found. Thanks a lot!
Well explained. Thank you
Best explanation out of four, I watched so far.
explained clearly. It is really helpful.
Thank you
techsith, you deserve millions of subscribers!! always clear and comprehensive tutorials...keep up the great work you do we truly appreciate it.
Thank you so much 😀 Keep on learning!
keep on sith. you are doing nice work
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
Thank you soo much for this video Hemil., Finally, it's your video that makes my day.
Awesome as usual. Cheers!
Great video thanks very much !
this video was sooooo helpful.. I was stuck on the child component ref for hours.. :) -- thank you!!!!!!!
thank you so much. very clear and intuitive way of teaching
Glad it was helpful!
Helped me a lot .. thank you 👍
thanks! taught me exactly what I wanted :)
Great to hear!
Nice video!
Brilliant! Thank you
thanks this was a great video!
Excellent example thank you sir!
Nice one! just in time...
Superb video 💥💥💥
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.
Best on Refs.
you explained it very well..
Great video!!
Really useful, thanks so much.
Thanks, it's very helpfull
Clear explanation, thanks!
Pawel, Glad it was helpful!
Thank you, your video helped me a lot
Glad it helped
Thank you.
Just a little bit more context around forward ref in practice side would have been great... Otherwise its awesome
nice - thankyou
Best Explained
Awesome... Well explained... Thanks
Thanks for watching Narendra.
thank you
awesome
thank you alot
very good!
Superman 🥰
Nice video, how would you implement the focus based on the length of the text and not on the key event? Thank you.
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.
Thank you very much..
You made this so simple, thank you so much
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.
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.
Can you bother a little to make a vedio on how to send refs from child to parent , it will be appreciated a lot .
Hemil,
Can you do a short video on Higher Order Components that uses only function components
Most developers like render props & custom hooks instead hoc because it's hard to track code when using hoc
which vscode theme did you use in these video?
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??
Anyway to make this work with Typescript? the Input has type conflicts with what React.forwardRef() expects as an argument
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
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?
Please share your views on, what's the future of php with javascript growing so rapidly.
these days , php is used for smaller sites , but for any thing enterprise level , its usually something else. JavaScript is growing more and more.
11:47 forwarded ref
Thanks..
here we are exporting forwardInput from input.js file but in app.js we are importing input not forwardInput how is this working
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?
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 )}}.
When update a state value, the component re-renders. When you update a ref value, it doesn't trigger a re-render.
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 ?
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 !!
Maybe he did it so it would be obvious to viewers. Tutorials do not need to follow DRY principles to explain things like this
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.
Tushar , I do have a video on component communication which explains just that. Its using classes but the concept should be the same.
What if the function Input was within the App.js file?? How can you export without using export default??
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
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()
}
}
Great job, thank you!
Glad it was helpful!
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
HashRouter doesnt support certain things . I would suggest using BrowserRouter instead
What if i want to pass ref from a hoc to a Component?
what vs code extension that convert => into arrow?
50/5000
Why couldn't it be done that way?:
...
return(
)
and inside Input:
const Input=({firstNameRef)=>{
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.
5:30
Could you make a udemy a course on MERN stack
Next week i am releasing a course on React Hooks. I might go for MERN stack afterwards.
@@Techsithtube Thank you sir
How can we do multilevel "forwarding ref" Parent
Just pass this ref to your SubChild
why my page got refresh on enter ?
Share your code. it should not have refreshed.
1000th like
techshitt
rip my ears.
{2024-03-22}
Not given a deep concept.. only he focused on English spoken language
forwardRef explanation was not good