React useRef and forwardRef in depth

Рет қаралды 24,470

Күн бұрын

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

Пікірлер: 71

@Mayomoz11 2 жыл бұрын

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

@FullstackSimplified 2 жыл бұрын

Thanks for watching

@demomicrocrawlerclub Жыл бұрын

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

@FullstackSimplified Жыл бұрын

Glad it was helpful!

@ThomasKupracz 2 жыл бұрын

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 2 жыл бұрын

Glad it helped. Thanks for watching man🔥🔥

@CliffordFajardo 2 жыл бұрын

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 2 жыл бұрын

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!!

@Fulakitele 2 жыл бұрын

Excellent explanation brother. Thank you very much!

@FullstackSimplified 2 жыл бұрын

Thanks for watching 🔥🔥

@ifeolulesi Жыл бұрын

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

@FullstackSimplified Жыл бұрын

Glad it helped

@shivakrishnakudurupaka3601 2 жыл бұрын

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

@FullstackSimplified 2 жыл бұрын

Glad it helped. Thanks for watching

@phaZZi6461 11 ай бұрын

very clean presentation and explanation. thank you very much

@FullstackSimplified 9 ай бұрын

Glad it was helpful!

@tanayahuja87 Жыл бұрын

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

@FullstackSimplified Жыл бұрын

Thanks and welcome

@sayyedaamerasharali7583 2 жыл бұрын

Very helpful video 👍😁

@gabrielkripalani1681 Жыл бұрын

great job on that explanation!

@FullstackSimplified Жыл бұрын

Glad it was helpful!

@Durgaprasad-be1jc Жыл бұрын

Nice explanation brother. Thank you

@FullstackSimplified Жыл бұрын

Glad you liked it

@shaurgaleeb6285 Жыл бұрын

clear and perfect

@ninadkhanolkar3256 Жыл бұрын

Finally understood Forward Ref :-)

@FullstackSimplified Жыл бұрын

Really glad it helped. Thanks for watching

@Nilesh.Pandey 2 жыл бұрын

Great work bro 👍🏽

@FullstackSimplified 2 жыл бұрын

Thanks alot 👍

@anshurao4727 2 жыл бұрын

very helpful sir thank you!!

@FullstackSimplified 2 жыл бұрын

Glad you like it. Thanks

@georgylistopad3976 2 ай бұрын

Thank you soooooooooooo MUCH!!❤

@FullstackSimplified Ай бұрын

You’re welcome! Glad you liked it

@Pareshbpatel 8 ай бұрын

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

@FullstackSimplified 6 ай бұрын

Glad you liked it. Thanks for watching

@zainmalik2812. Жыл бұрын

Only react users knows how helpful this video is

@FullstackSimplified Жыл бұрын

Really glad you liked it. Thanks for watching

@HarshSingh-hk8fe 2 жыл бұрын

nicely explained too good :D

@FullstackSimplified 2 жыл бұрын

Thanks a lot 😊

@rahulkrishna164 2 жыл бұрын

Great video

@FullstackSimplified 2 жыл бұрын

Thank you

@kritigoswami7382 2 жыл бұрын

Indeed helpful 🙂

@FullstackSimplified 2 жыл бұрын

Thank you

@sujitrockstar221 2 жыл бұрын

Nice Video

@ramesh90010 2 жыл бұрын

Good job 👌

@FullstackSimplified 2 жыл бұрын

Thank you 😀

@ashishkumarsingh9857 2 жыл бұрын

Bhaiya... Meri samajh mei aa gya bhaiya.

@FullstackSimplified 2 жыл бұрын

😂😂👍

@Abdulllahqanadilo7512 2 жыл бұрын

Thanks :)

@armenstepanyan2954 2 жыл бұрын

great video

@FullstackSimplified 2 жыл бұрын

Thanks for watching 🔥🔥

@fromsoundtosea2010 Жыл бұрын

nice!

@FullstackSimplified Жыл бұрын

Glad you liked it. Thanks for watching

@kevin73911 2 жыл бұрын

Thank you. ;)

@FullstackSimplified 2 жыл бұрын

Thanks for watching

@romantyniv5381 2 жыл бұрын

thanks

@FullstackSimplified 2 жыл бұрын

You're welcome!

@alvingomez7079 Жыл бұрын

10/10 STARS !!!!

@FullstackSimplified Жыл бұрын

Glad you liked it

@thecareercoach231 2 жыл бұрын

Good.

@FullstackSimplified 2 жыл бұрын

Thank you

@deepaksaroha522 2 ай бұрын

usecase 2 and 2 not same?

@saurabrakshit405 2 жыл бұрын

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 2 жыл бұрын

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

@chhavimanichoubey9437 2 ай бұрын

web dev simplified - indian version?

@FullstackSimplified Ай бұрын

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

@chennasreenu4723 6 ай бұрын

Thank You, Keep doing Indian

@FullstackSimplified 6 ай бұрын

Thanks for watching. Do checkout my latest video on the channel as well on react dark mode - kzfaq.info/get/bejne/jN2mi82LrtWbqac.htmlsi=w3jhLV6RUt4WkCst