Never Forget React forwardRef Again

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/coding-in-public/r...
- Forward Ref docs: react.dev/reference/react/for...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen...

[@alinikpey5797]

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

[@CodinginPublic]

That’s so kind! Glad it was such a help! Thanks!

[@SouravDuttaROCKSTAR]

One of the best explanation for forwardRef. Short yet precise.💯

[@CodinginPublic]

Glad it was a help! Thanks for saying something!

[@raldskie23]

This is the clearest explanation of forwardRef ive ever watched and learned. Just straight up to the point, with proper context to the premise. 🔥

[@CodinginPublic]

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!

[@akash-kumar737]

Very well explained I always wondered how forwardRef work. Cheers 🍻 mate.

[@CodinginPublic]

Glad it was a help!

[@grant_vine]

Nice overview and so simply shown

[@CodinginPublic]

So glad it was a help!

[@morchellemusic2829]

Thanks for the explanation, very clear and concise

[@CodinginPublic]

Glad it was helpful!

[@__greg__]

This was a great explanation, thanks for sharing!

[@CodinginPublic]

Glad it was a help!

[@osifojohn1513]

Love this video, you cleared all my doubts.

[@CodinginPublic]

Glad it was helpful!

[@DashFactsCentral]

Very beautifully explained! Thanks alot!

[@CodinginPublic]

Glad it was helpful!

[@chihuhahuana4863]

this video was actually so cool. thanks man!

[@CodinginPublic]

Glad you liked it!

[@ahtshamsaleem2970]

keep making more videos like these i loved it

[@sahilrathod3930]

Great explanation... ❤

[@CodinginPublic]

Thanks for saying something! Glad it was a help!

[@yutsacarm8021]

Omg !!!!! This is the. Best explanation of useRef video !!!

[@CodinginPublic]

Glad it was helpful!

[@RandomMcLain]

🎯 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

[@CodinginPublic]

Thanks, my friend!

[@godofwar8262]

Thank you finally a react video

[@CodinginPublic]

Ha :) hopefully more to come!

[@prashlovessamosa]

Thanks for sharing please make more react stuff.

[@CodinginPublic]

Glad you enjoyed it!

[@minyoungna6642]

Agreed!!

[@K.Huynh.]

thank for sharing! So cool 😎

[@CodinginPublic]

Glad it was a help!

[@Firewallx2]

Thanks!

[@CodinginPublic]

You’re welcome!

[@mounis]

Sorry for the out of context question, which font do you use? And BTW amazing explanation.

[@CodinginPublic]

No worries. Cascadia code. Free font by Microsoft.

[@Aaronmoreno]

So clear! I’m won over. I subbed

[@CodinginPublic]

Great! Glad it was a help!

[@adarsh-chakraborty]

Thanks

[@CodinginPublic]

Glad it was a help.

[@ahmadm.hawwash3931]

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?

[@VishalSharma-rn7mt]

Awesome

[@ronaldpaek]

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.

[@CodinginPublic]

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.

[@ronaldpaek]

that makes sense, I feel like most viewers/supporters will be using vs code 😆@@CodinginPublic

[@mohammadalrefaai4377]

Actually the form could have one responsibility it could have the form and their inputs also the behavior of the inputs, it's cleaner 😊

[@CodinginPublic]

Could you explain more what you mean here?

[@user-lt1jr2gh4t]

can we forward multiple refs at once to a component?

[@CodinginPublic]

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.

[@Kraszer]

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.

[@nicus1504]

You CAN pass refs directly as props

[@CodinginPublic]

You can now in react 19. :)

[@Kraszer]

@@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.

[@ayushnautiyal9469]

What about multiple refs. If we want to pass multiple refs than how we use forwardrefs.

[@CodinginPublic]

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.

[@Kraszer]

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.

[@Pareshbpatel]

{2024-03-22}

[@CodinginPublic]

Paresh was here. 👋

[@anhdunghisinh]

And now they ditch forwardRef :v

[@CodinginPublic]

lol i know, right?

[@ChristinaCodes]

This is by far the best forwardRef video I’ve ever seen, it finally makes sense 🥲 Thank you so much for this.

[@CodinginPublic]

You’re welcome! Glad it was such a help! That’s so…

[@carlandres3319]

Thanks

[@CodinginPublic]

You’re welcome!