React useRef and forwardRef in depth

In this video you will learn how to use React useRef hook and forwardRef in order to reference any element present in the DOM tree in a completely optimised and recommend way.
☕️ Support me - www.buymeacoffee.com/gprasoon
📚 Materials/References:
- Github link - github.com/FullstackSimplifie...
- Create react app: reactjs.org/docs/create-a-new...
- React useRef docs: reactjs.org/docs/hooks-refere...
- React forwardRef docs: reactjs.org/docs/forwarding-r...
🧠 Concepts Covered:
- React Refs
- React Hooks
- React useRef
- React forwardRef
🌎 Find Me Here:
My Website: prasoon.me
LinkedIn: / prosoon-goswami
Twitter: / prasoongoswami4
GitHub: github.com/FullstackSimplified
Instagram: / prasoon_goswami

[@Mayomoz11]

Thank you! The docs made it a little confusing, your explanation was perfect :)

[@FullstackSimplified]

Thanks for watching

[@demomicrocrawlerclub]

Very informative and straightforward. Great examples also. Thanks a lot.

[@FullstackSimplified]

Glad it was helpful!

[@Fulakitele]

Excellent explanation brother. Thank you very much!

[@FullstackSimplified]

Thanks for watching 🔥🔥

[@ThomasKupracz]

Just wanted to say a BIG THANK YOU for this video. I could have saved myself 20 hours of frustration and swearing if I had just watched it before starting to play with Refs. You rock!

[@FullstackSimplified]

Glad it helped. Thanks for watching man🔥🔥

[@ifeolulesi]

A very useful video. I was able to understand useRef and forwardRef clearly.

[@FullstackSimplified]

Glad it helped

[@tanayahuja87]

Amazing tutorial in just one go i have understood it. Awesome sir ji! Excellent and also short & sweet video!

[@FullstackSimplified]

Thanks and welcome

[@phaZZi6461]

very clean presentation and explanation. thank you very much

[@FullstackSimplified]

Glad it was helpful!

[@shivakrishnakudurupaka3601]

Feeling happy that I know when to use forwardRef hook now😀

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@gabrielkripalani1681]

great job on that explanation!

[@FullstackSimplified]

Glad it was helpful!

[@Durgaprasad-be1jc]

Nice explanation brother. Thank you

[@FullstackSimplified]

Glad you liked it

[@sayyedaamerasharali7583]

Very helpful video 👍😁

[@anshurao4727]

very helpful sir thank you!!

[@FullstackSimplified]

Glad you like it. Thanks

[@ninadkhanolkar3256]

Finally understood Forward Ref :-)

[@FullstackSimplified]

Really glad it helped. Thanks for watching

[@Nilesh.Pandey]

Great work bro 👍🏽

[@FullstackSimplified]

Thanks alot 👍

[@shaurgaleeb6285]

clear and perfect

[@CliffordFajardo]

At 3:01 - "useEffect" goes into an infinite loop since you're not passing an item to the dependency array so I think you're not using the hook in the way it was intended: - change state -> component re-renders -> hook re-runs again -> component re-renders; in fact that infinite loop happening is not a bug but actually suppose to happen, I don't think this example was particularly good as it might confuse beginners into thinking their is inherent downside to useEffect in this situation which is not the case I did learn a bit more about "useRef" thanks!

[@FullstackSimplified]

I think you didn’t get what actually was meant. If you want to count how many times the component re renders you can't pass any dependency array to the useffect. If you pass an empty array then that effect will run only once for the first time when the component mounts and then we wont be able to count the number of re renders. So for this particular case useState do have a downside and that is why we use refs for these cases which survives between render cycles. So if you watch the video again you will se it is one of the easiest example for beginners to understand the use of refs in these conditions. Thanks for watching!!

[@HarshSingh-hk8fe]

nicely explained too good :D

[@FullstackSimplified]

Thanks a lot 😊

[@zainmalik2812.]

Only react users knows how helpful this video is

[@FullstackSimplified]

Really glad you liked it. Thanks for watching

[@kritigoswami7382]

Indeed helpful 🙂

[@FullstackSimplified]

Thank you

[@Pareshbpatel]

A very clear explaination of useRef and forwardRef. Thanks. {2023-11-09}, {2024-03-22}

[@FullstackSimplified]

Glad you liked it. Thanks for watching

[@rahulkrishna164]

Great video

[@FullstackSimplified]

Thank you

[@sujitrockstar221]

Nice Video

[@georgylistopad3976]

Thank you soooooooooooo MUCH!!❤

[@FullstackSimplified]

You’re welcome! Glad you liked it

[@ramesh90010]

Good job 👌

[@FullstackSimplified]

Thank you 😀

[@mohammadqanadilo7512]

Thanks :)

[@ashishkumarsingh9857]

Bhaiya... Meri samajh mei aa gya bhaiya.

[@FullstackSimplified]

😂😂👍

[@armenstepanyan2954]

great video

[@FullstackSimplified]

Thanks for watching 🔥🔥

[@kevin73911]

Thank you. ;)

[@FullstackSimplified]

Thanks for watching

[@alvingomez7079]

10/10 STARS !!!!

[@FullstackSimplified]

Glad you liked it

[@fromsoundtosea2010]

nice!

[@FullstackSimplified]

Glad you liked it. Thanks for watching

[@romantyniv5381]

thanks

[@FullstackSimplified]

You're welcome!

[@thecareercoach231]

Good.

[@FullstackSimplified]

Thank you

[@deepaksaroha522]

usecase 2 and 2 not same?

[@saurabrakshit405]

Can you bother a little to make a vedio on how to send refs from child to parent , it will be appreciated a lot .

[@FullstackSimplified]

Hey thanks for watching. For passing ref from child to parent you can use callback

[@chhavimanichoubey9437]

web dev simplified - indian version?

[@FullstackSimplified]

Glad you consider the same. Trying to make things easier to understand.

[@chennasreenu4723]

Thank You, Keep doing Indian

[@FullstackSimplified]

Thanks for watching. Do checkout my latest video on the channel as well on react dark mode - kzbin.info/www/bejne/jKjZiZ2QftRqr9Usi=w3jhLV6RUt4WkCst

[@willyhorizont8672]

thanks

[@FullstackSimplified]

You're welcome!