Watching 10 video to understand what is userRef and forwardRef and why it is called ref untill i heard the answer from you. Thank you. that was a nice explanation
So glad it was a help! I find that my clearest videos are the ones that come out of errors I make because it forces me to get to the bottom of why things are the way they are. Glad it was a help to you, too!
@@CodinginPublic I did indeed. However, also in meanwhile I found to realise that forwardRef is to be deprecated soon and refs should be passed as props.
🎯 Key Takeaways for quick navigation: 00:34 🤖 React relies on createElement to generate elements in the virtual DOM. 02:26 🛡️ useRef helps bridge the gap between the virtual DOM and the actual DOM for direct access. 03:22 💼 Understanding when to use forwardRef: when a component needs access to the actual DOM node, not just the virtual DOM. 05:14 🛡️ How to implement forwardRef in JavaScript and TypeScript, passing the ref down to child components. 08:30 🤖 Utilizing the children prop for dynamic content within a component. Made with HARPA AI
why can't we use just another variable instead of ref ? I mean, in the Form component, we pass another variable, say 'inputRefVar' whose value would be {inputRef}. now inside the component in the input element, we set ref={inputRefVar}. wouldn't it work ? we could still have the parent control it right ? why forwardRef ?
5:15 "well you might think that you can pass refs like props like this, but that's not how they work" But why not though? That's the answer that no one seems to explain. It does actually work, but not always. Why?
I have a question about IDE's I remember watching some of your older videos and you used to use Nova IDE, just wanted to hear why you switched back to VS code I haven't seen many people use Nova IDE so I would love to hear about the Pros / Cons of Nova vs VS Code.
I haven’t used nova in a while, so I’m sure they’re much better now. I loved it but between viewers on the channel wanting to see VSCode and the lack of support for things like Astro originally, I switched.
No, and something I should have mentioned (at least I don’t think you can). Typically you componetize individual inputs or items that need a ref (so single elements) when forwarding refs.
@@CodinginPublic Not true, you could pass refs as props before, and it just worked. I tested in on React 17.0.0. I spend some time on internet and still really didn't understand why fowardRef exists.
You don't :) The idea is to have each component as it's own standalone. So you'd have a single input with a forwardRed that you would embed in a form that might have another forwardRef, etc.
Watching 10 video to understand what is userRef and forwardRef and why it is called ref untill i heard the answer from you. Thank you. that was a nice explanation
That’s so kind! Glad it was such a help! Thanks!
This is the clearest explanation of forwardRef ive ever watched and learned. Just straight up to the point, with proper context to the premise. 🔥
So glad it was a help! I find that my clearest videos are the ones that come out of errors I make because it forces me to get to the bottom of why things are the way they are. Glad it was a help to you, too!
One of the best explanation for forwardRef. Short yet precise.💯
Glad it was a help! Thanks for saying something!
Very well explained I always wondered how forwardRef work.
Cheers 🍻 mate.
Glad it was a help!
Very helpful, thank you!!
Nice overview and so simply shown
So glad it was a help!
Thanks for sharing please make more react stuff.
Glad you enjoyed it!
Agreed!!
Thanks for the explanation, very clear and concise
Glad it was helpful!
Thank you finally a react video
Ha :) hopefully more to come!
Thank Chris! Really great explanation!
Glad you found it helpful!
@@CodinginPublic I did indeed. However, also in meanwhile I found to realise that forwardRef is to be deprecated soon and refs should be passed as props.
Omg !!!!! This is the. Best explanation of useRef video !!!
Glad it was helpful!
This was a great explanation, thanks for sharing!
Glad it was a help!
this video was actually so cool. thanks man!
Glad you liked it!
Love this video, you cleared all my doubts.
Glad it was helpful!
keep making more videos like these
i loved it
Very beautifully explained! Thanks alot!
Glad it was helpful!
🎯 Key Takeaways for quick navigation:
00:34 🤖 React relies on createElement to generate elements in the virtual DOM.
02:26 🛡️ useRef helps bridge the gap between the virtual DOM and the actual DOM for direct access.
03:22 💼 Understanding when to use forwardRef: when a component needs access to the actual DOM node, not just the virtual DOM.
05:14 🛡️ How to implement forwardRef in JavaScript and TypeScript, passing the ref down to child components.
08:30 🤖 Utilizing the children prop for dynamic content within a component.
Made with HARPA AI
Thanks, my friend!
Great explanation... ❤
Thanks for saying something! Glad it was a help!
Sorry for the out of context question, which font do you use?
And BTW amazing explanation.
No worries. Cascadia code. Free font by Microsoft.
Amazing explanation! Thank you very much. I'll keep following your content. +1 sub 🥳
🙏
So clear! I’m won over. I subbed
Great! Glad it was a help!
why can't we use just another variable instead of ref ? I mean, in the Form component, we pass another variable, say 'inputRefVar' whose value would be {inputRef}. now inside the component in the input element, we set ref={inputRefVar}. wouldn't it work ? we could still have the parent control it right ? why forwardRef ?
This is the question that it seems no one tries to explain
nice understading
thank for sharing! So cool 😎
Glad it was a help!
Great video, thanks for sharing!
Can't we pass it as another prop name? I mean we could pass as reference instead of ref. Could that solve the issue?
This is the question no one seems to try to explain.
Thanks!
You’re welcome!
5:15 "well you might think that you can pass refs like props like this, but that's not how they work"
But why not though? That's the answer that no one seems to explain. It does actually work, but not always. Why?
I have a question about IDE's I remember watching some of your older videos and you used to use Nova IDE, just wanted to hear why you switched back to VS code I haven't seen many people use Nova IDE so I would love to hear about the Pros / Cons of Nova vs VS Code.
I haven’t used nova in a while, so I’m sure they’re much better now. I loved it but between viewers on the channel wanting to see VSCode and the lack of support for things like Astro originally, I switched.
that makes sense, I feel like most viewers/supporters will be using vs code 😆@@CodinginPublic
Thanks
Glad it was a help.
Awesome
Actually the form could have one responsibility it could have the form and their inputs also the behavior of the inputs, it's cleaner 😊
Could you explain more what you mean here?
can we forward multiple refs at once to a component?
No, and something I should have mentioned (at least I don’t think you can). Typically you componetize individual inputs or items that need a ref (so single elements) when forwarding refs.
Just pass refs as normal props. It works on older React versions too like 17.0.0. I don't understand why to even use fowardRef.
You CAN pass refs directly as props
You can now in react 19. :)
@@CodinginPublic Not true, you could pass refs as props before, and it just worked. I tested in on React 17.0.0. I spend some time on internet and still really didn't understand why fowardRef exists.
What about multiple refs. If we want to pass multiple refs than how we use forwardrefs.
You don't :) The idea is to have each component as it's own standalone. So you'd have a single input with a forwardRed that you would embed in a form that might have another forwardRef, etc.
Just pass refs as normal props. It works on older React versions too like 17.0.0. I don't understand why to even use fowardRef.
Can we put ref in context
Most painful thing in react
Hopefully in v19 will be removed
It is!
And now they ditch forwardRef :v
lol i know, right?
{2024-03-22}
Paresh was here. 👋
This is by far the best forwardRef video I’ve ever seen, it finally makes sense 🥲 Thank you so much for this.
You’re welcome! Glad it was such a help! That’s so…
Thanks
You’re welcome!