Never Forget React forwardRef Again
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- forwardRef can be confusing when moving from vanilla JavaScript. Once you think like React, however, it both makes sense and is more useful than you'd think.
🔗 Key Links 🔗
- Code: github.com/cod...
- Forward Ref docs: react.dev/refe...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic...
- Blog: chrispenningto...
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoff...
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!
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!
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?
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 ?
Great explanation... ❤
Thanks for saying something! Glad it was a help!
This was a great explanation, thanks for sharing!
Glad it was a help!
Very beautifully explained! Thanks alot!
Glad it was helpful!
Love this video, you cleared all my doubts.
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!
One of the best explanation for forwardRef. Short yet precise.💯
Glad it was a help! Thanks for saying something!
Thanks!
You’re welcome!
Thanks
You’re welcome!
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?
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.
Awesome
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.
{2024-03-22}
Paresh was here. 👋
And now they ditch forwardRef :v
lol i know, right?
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…
Very well explained I always wondered how forwardRef work.
Cheers 🍻 mate.
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.
Nice overview and so simply shown
So glad it was a help!
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
nice understading
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.
keep making more videos like these
i loved it
thank for sharing! So cool 😎
Glad it was a help!
Omg !!!!! This is the. Best explanation of useRef video !!!
Glad it was helpful!
this video was actually so cool. thanks man!
Glad you liked it!
So clear! I’m won over. I subbed
Great! Glad it was a help!
Thanks
Glad it was a help.
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.