Refs in React: from access to DOM to imperative API

👉 Advanced React Book: www.advanced-react.com
👉 Refs in React: from access to DOM to imperative API: www.developerway.com/posts/re...
💬 Twitter: / adevnadia
💬 Linkedin: / adevnadia
👩🏼‍💻 Simple ref use: codesandbox.io/s/giant-form-r...
👩🏼‍💻 Pass ref as a prop: codesandbox.io/s/example2-pas...
👩🏼‍💻 Pass ref with forwardRef: codesandbox.io/s/example3-pas...
👩🏼‍💻 Imperative API with useImperativeAPI hook: codesandbox.io/s/example4-imp...
👩🏼‍💻 Imperative API without that useImperativeAPI hook: codesandbox.io/s/example5-imp...
Looking into why we need access to DOM in React, how Refs can help with that, what are useRef, forwardRef and useImperativeHandle hooks, and how to use them properly.
#react #reactjs #webdevelopment #programming #frontend #frontenddeveloper #js #javascript

[@devquen7688]

wow, this is the video containing all of the knowledge about useRef as I know 🤯

[@thiagopuntar]

Oh, missed you! Thank you so much for all your articles. Please keep doing more and more!😍

[@fal8202]

thank you for this well explained and nicely animated video, so much easier to understand

[@dimau]

Спасибо за такую хорошую глубину разбора материала и восхитительную подачу! Раскладывает по полочкам в голове сложные темы :)

[@developerwaypatterns]

Thank you for the kind words! 😊

[@userJakov]

@@developerwaypatternsдобрый вечер, а у вас нет книг на русском языке?

[@developerwaypatterns]

@@userJakov Unfortunately, no :(

[@marouaniAymen]

Thanks for the video, I used the same pattern like you, but for using conditionals in order to activate/deactivate styles, I call the clsx library in order to toggle CSS classe names.

[@elik3765]

Thank you very much! As always, to the point and I don't think I have seen better visuals anywhere around, I think they ccontribute well to your brands defferentiation when compared to code-along vids. Article and a vid is my favorite combination. To me, it's like an article is for sharpening my knowledge, video - for honing )

[@developerwaypatterns]

Thank you! 😊

[@vinitraut18]

Thanks Nadia, great content as always!!!

[@gaddp]

super clear video with a beautiful example. thanks Nadia!

[@nicolasmenescardi4077]

Love your videos!! Thanks!

[@assylzhanshabkhatov5763]

Really useful guide. Thanks!

[@katsunoi]

great video!

[@TheProfessionalGambler]

Does React have any differences or caveats between inputRef={ref} and forwardRef()? It looks like the ref is just a unified version of the ref transfer in these cases.

[@developerwaypatterns]

They are pretty much the same, yeah

[@sushantrajbanshi4508]

So the *forwardRef* & *useImperativeHandle* are just syntactic sugars over manually passing refs & mutations ? Or are there any performance benefits on using them ?

[@developerwaypatterns]

Yep, exactly. I'm not aware of any performance benefits of those vs just manually passing ref around, and I doubt there can be any.

[@aeldarets]

How is this going to work with TypeScript?

[@developerwaypatterns]

same as with javascript

[@anuragkanwar1844]

Love your blogs !! and now video content is cherry on top

[@aaryansj8016]

Thanks... Wonderful Vidoes