React Hook useRef and forwarding refs with forwardRef
HTML-код
- Опубликовано: 30 сен 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 :)
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!!
Well explained. 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.
Great video thanks very much !
waiting for the perfect one and this arrives!
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!
A quick and precise intro to why forward ref is needed.
Just a little bit more context around forward ref in practice side would have been great... Otherwise its awesome
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.
A clean video again from you sith... thank you
keep on sith. you are doing nice work
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
50/5000
Why couldn't it be done that way?:
...
return(
)
and inside Input:
const Input=({firstNameRef)=>{
Awesome as usual. Cheers!
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()
}
}
techshitt
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??
Nice video!
here we are exporting forwardInput from input.js file but in app.js we are importing input not forwardInput how is this working
thanks this was a great video!
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
explained clearly. It is really helpful.
Thank you
thanks! taught me exactly what I wanted :)
Great to hear!
Can you bother a little to make a vedio on how to send refs from child to parent , it will be appreciated a lot .
Not given a deep concept.. only he focused on English spoken language
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
Anyway to make this work with Typescript? the Input has type conflicts with what React.forwardRef() expects as an argument
Nice one! just in time...
Thx for the tutorial now i understood why we need ref and forwarding ref
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?
Thanks, it's very helpfull
this video was sooooo helpful.. I was stuck on the child component ref for hours.. :) -- thank you!!!!!!!
Thank you so much. This is probably the best explanation on useRef and forwardRef
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.
Thank you soo much for this video Hemil., Finally, it's your video that makes my day.
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?
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
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 ?
forwardRef explanation was not good
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!
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.
The best explanation of forwardRef that I found. Thanks a lot!
{2024-03-22}
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
5:30
What if i want to pass ref from a hoc to a Component?
which vscode theme did you use in these video?
Brilliant! Thank you
Helped me a lot .. thank you 👍
Superb video 💥💥💥
11:47 forwarded ref
Best explanation out of four, I watched so far.
nice - thankyou
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.
Great video!!
Superman 🥰
thank you alot
1000th like
Thank you.
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.
thank you
Best on Refs.
Really useful, thanks so much.
awesome
Excellent example thank you sir!
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.
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
Nice video, how would you implement the focus based on the length of the text and not on the key event? Thank you.
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
How can we do multilevel "forwarding ref" Parent
Just pass this ref to your SubChild
what vs code extension that convert => into arrow?
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!
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.
you explained it very well..
thank you so much. very clear and intuitive way of teaching
Glad it was helpful!
Best Explained
Thank you very much..
very good!
Thanks..
Clear explanation, thanks!
Pawel, Glad it was helpful!
Awesome... Well explained... Thanks
Thanks for watching Narendra.
Thank you, your video helped me a lot
Glad it helped
why my page got refresh on enter ?
Share your code. it should not have refreshed.
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
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.
You made this so simple, thank you so much
Great job, thank you!
Glad it was helpful!
rip my ears.