Learn React Hooks: useRef - Simply Explained!

Рет қаралды 83,798

Жыл бұрын

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
In this video we will learn about React hooks, starting with useRef. This powerful React hook will allow you to store and manipulate values that are not needed for rendering. You will learn the difference between useRef and useState, when to use which, and how useRef works under the hood. We will use refs to handle values without triggering re-rendering, and we will also look at how refs can be used to manipulate HTML elements, as well as how they are used in 3rd party libraries.
In this new React world, hooks are here to stay, so it's best to learn them! In this tutorial I demonstrate the useRef React hook, and I explain it very simply and in a way that is easy to understand. Enjoy!

Пікірлер: 171

@cosdensolutions 3 ай бұрын

Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react

@Pernicuz 5 ай бұрын

These guides are incredible. You made me understand clearly in 3 videos what my teacher couldnt in 3 days

@davidkurniawan1358 6 ай бұрын

This is the reason why it's hard to understand about useRef. It's so confusing but you help me to make it easier to understand. GREAT JOB!!!

@ZahidHussain-hj2dk 7 ай бұрын

Best useref tutorial.....highly recommended

@SK-fq2yz 5 ай бұрын

Thank you very much. It really is the last useRef video i would ever need.

@vesa95 Жыл бұрын

Love this series!!! 🤗

@TheGr33k13 Жыл бұрын

Great job! Your videos have been really clear and provide straight forward examples even explaining some of the gotchas of react

@cosdensolutions Жыл бұрын

Really glad you're enjoying them!

@psychobuddha5379 10 ай бұрын

I was bit suspicious when you said we will not need another video for this but you were right. Really nice explanation, I finally understand the usage of refs.

@cosdensolutions 10 ай бұрын

Happy to hear it!

@zambidzhelov6734 10 ай бұрын

This is the best useRef tutorial . Thansk !

@cheiguerabdelwehab6802 7 ай бұрын

Thank you so much, this video helped me in my interview, specially the re-rendering part

@vishalupadhayay6391 10 ай бұрын

Nice video and appreciate the time and effort that you put into developing quality content.

@haciendadad 9 ай бұрын

I really like this description, it made sense. I am a new sub and opted to be notified of all your videos. You seems like this is a good example of the new gen of code videos.

@cosdensolutions 9 ай бұрын

I really appreciate that!

@jamilibrahimli190 5 ай бұрын

Thank you so much , i was realy confused when read the docs , but now it's clear much more better!

@Arnav404 2 ай бұрын

love your explanation. every thing is clear now about useRef, thanks!!

@victortislenko7279 2 ай бұрын

The best explanation! Thank you

@Engr.SharoonHoney Ай бұрын

That's amazing explanation of useRef on whole KZfaq. Thanks sir 👍

@altan183 4 ай бұрын

Very clear and concise, thank you for the explanation.

@rushikeshjadhav7748 11 ай бұрын

Hats off to you sir! Great explanation for a beginner like me

@lhommeunknown3985 11 ай бұрын

Great video man, really clear explanations !

@vincetamayo9669 4 ай бұрын

very clear and concise tutorial. thanks for this content

@official_youtube_1 11 ай бұрын

great explanation, Exactly what I was looking for It clears many doubt about state vs ref. count a like from me.

@melikarazavi3599 10 ай бұрын

useRef is very complicated for me , you make it simple .Thank you a lot!

@cosdensolutions 10 ай бұрын

You're welcome ☺️

@a_maxed_out_handle_of_30_chars 8 ай бұрын

wow, simple and to the point thanks a lot :)

@nowarm 12 күн бұрын

love your explanation!

@syuo5051 Ай бұрын

Many thanks for this clear explanation. 💗💗

@morofernando639 7 ай бұрын

Absolutely another wonderful tutorial after I watched this video I can say that I am super confident with working with useRef your explanation is really straightforward and clear

@cosdensolutions 7 ай бұрын

Glad to hear it!

@user-og5rw1nk7d 10 ай бұрын

Thanks, you explained it in a very simple way👌. I want to learn Express from you.

@akash.deblanq Жыл бұрын

Finally, I understood useRef. You explain very well my friend. Thank you!

@akash.deblanq Жыл бұрын

Liked and subbed.

@cosdensolutions Жыл бұрын

glad it helped! 🤙

@adrianayon5513 8 ай бұрын

Thank you, very good explanation!! You helped me a lot!!

@OmG21097 5 ай бұрын

Thanks for detailed explanation!!

@sankalpsharma3050 5 ай бұрын

Thanks Cosden . Good video

@samuelerbo 6 ай бұрын

Thanks man! I learned a lot.

@suhaibsaifan7163 Жыл бұрын

Great explanation! .Looking forward for more series

@saschagobbels2177 8 ай бұрын

absolutely great explanation ! thx my friend

@petrus2746 5 ай бұрын

Nicely done my man.

@jay-kv6wn Жыл бұрын

Great video as always

@erickchavez4551 11 ай бұрын

I think I'm starting to get this hook. Easy to follow examples 👍. Also, it's great that you use the dark mode, my eyes appreciate it.

@cosdensolutions 11 ай бұрын

You're welcome ☺️

@esraamohamed5601 6 ай бұрын

Keep doing the best work.

@baciusebastian6361 8 ай бұрын

really good explanation, thank you for the video, really appreciate it

@user-hl9us2id5i 6 ай бұрын

Best explanation 🎉

@rennjaysoterio2543 8 ай бұрын

Great explanation!

@user-jn2rs3rw3x 6 ай бұрын

now I cant forget this, tq!

@kasiakordys266 10 ай бұрын

I have watched it 3 times and finally got it :-) thanks, great explanation

@cosdensolutions 10 ай бұрын

beautiful

@tariksadkhi3820 3 ай бұрын

Good explanation, thanks

@pranavjaiswal2379 9 ай бұрын

Thanks for the clarification i really understood the difference between the useref and usestate you made my 12 minutes worth

@cosdensolutions 9 ай бұрын

Glad you found it useful!

@eliyahutarab4862 Жыл бұрын

Clear and simple thank you

@cosdensolutions Жыл бұрын

Glad you enjoyed it ☺️

@guichi200 8 ай бұрын

Ho Wow. at 6 min it clear my mind. awesome, thanks.

@RihaLV 2 ай бұрын

Bro great explanation. Thanks

@idfk2873 11 ай бұрын

its very healful..great Video

@fatemeh-azad 3 ай бұрын

Thanks man this is awsome

@ajays3914 8 ай бұрын

Awesome video brother 😎

@samahgad241 6 ай бұрын

Realy, thanks alot😍

@milindkhadse556 2 ай бұрын

Helpful information thank you

@maheshranjankar2127 Жыл бұрын

i love this man 🙏🎉

@prafullkumar6369 2 ай бұрын

Very nice explained

@starfinitex 4 ай бұрын

I really enjoyed it and understood

@pp-studio 3 ай бұрын

Thank you so much for your incredible explained for react hook. it 's make me supper clear. 🥰

@akankshagunti5301 5 ай бұрын

Loved it 💌

@dirtysouth3291 10 ай бұрын

This is the BEST useRef tutorial - you are VERY good at explaining things in a decent amount of time, and you cover everything. I will try to find more useful videos on your channel, hopefully, there will also be something about TypeScript

@cosdensolutions 10 ай бұрын

Thank you! Glad you enjoyed it 🤙

@mohit6847 8 ай бұрын

Thanks for the video, it was a good explanation.

@mostinho7 5 ай бұрын

useRef stores state that doesn’t trigger a rerender when it changes. The useRef value isn’t used in the jsx component 2:45 nuance about setState, when you call setState to set a new state value, that state variable which will not have the same value until the next render, but incrementing a useRef value is immediate, happens right away not in the next render because useRef doesn’t even trigger a rerender 8:20 so usually you don’t use useRef value in the jsx because your component won’t rerender to display the latest useRef value, but you can use useRef to hold reference to HTMLElement to access dom elements directly and call functions on them like focusing a component

@pravinharigaikwad Жыл бұрын

Great explanation 👏

@cosdensolutions Жыл бұрын

🤙

@AhammedShaheedhudheen 6 ай бұрын

you Earned a subscription

@asifmondal7609 7 ай бұрын

Well explained buddy.. Big 👍

@es7729 3 ай бұрын

You're the type of tutor we just want to hit that like button for without first having to watch the video, because previous videos were on point! Thanks! + would you also mind if I were to explain these hooks but in other language with credit like "Inspired by: Cosden Solutions"?

@cosdensolutions 3 ай бұрын

yes go for it!

@leonardmbibi8013 9 ай бұрын

Guy, you rock!

@chadaramprasanna9259 5 ай бұрын

Thanks bro. 💯

@julienheng3880 6 ай бұрын

you did an excellent job in explaining things with examples in short amount of time. Give me more tutorials lol

@cosdensolutions 6 ай бұрын

There's a playlist full of them!

@nabilachehlafekir8577 9 ай бұрын

thank you so much ^^

@dejandjosic1258 10 ай бұрын

Very well explained. Subscribed.

@cosdensolutions 10 ай бұрын

🤙

@CodingWithDapo 11 ай бұрын

Thank you so much, I have wasted so much time searching for this simple answer.

@cosdensolutions 11 ай бұрын

You're most welcome ☺️

@ankitputhran 7 ай бұрын

Very helpful

@nickytomar959 11 ай бұрын

Really awesome ❤❤

@zabialy2919 8 ай бұрын

Great video, keep it up

@malayalenka9164 7 ай бұрын

Awesome!

@supplyuniquenotessun4562 9 ай бұрын

respected .. very thanks

@AhmedHuzain 6 ай бұрын

Thank you!

@pasinduvinsuka 7 ай бұрын

Thank you so much

@blackfortmusic7729 Жыл бұрын

Growing fast man!

@cosdensolutions Жыл бұрын

🤙

@rubyc7771 3 ай бұрын

To elaborate 2:24 useRef() always returns an object with one 1 property, literally 1 called 'current'. If you console.log(ref), you will see this and 'current' is of 'any' type.

@FGA-47 11 ай бұрын

Thanks that was really helpful❤🫡

@cosdensolutions 11 ай бұрын

🫡

@enafor99 Жыл бұрын

Great tutorial thanks

@cosdensolutions Жыл бұрын

🤙

@_soet 4 ай бұрын

Very useful

@mahdighasemi9518 10 ай бұрын

Thanks a lot.

@ahmednabeel358 9 ай бұрын

You will be famous one day keep going 🙂 thanks a lot

@chamalsena 2 ай бұрын

Loved this series man !! btw whats the vscode theme ?

@emmanuelareiza9699 Ай бұрын

TY Bro

@someChicoRy 10 ай бұрын

круто, продолжай its intresting. continue This)

@HriSri 8 ай бұрын

Thanks

@songbaiyin7830 Ай бұрын

Godlike

@VishalSharma-rn7mt 6 ай бұрын

Awesome

@sonnyl2915 2 ай бұрын

Thanks. But i still need time to pondering about this hook.😊

@andrewdatar9880 7 ай бұрын

Your reach hooks playlist is awesome. Thank you. As for useRef vs useState - I understand the point you are trying to show. But you kinda comparing apples to oranges. If you make your state object (to be similar to ref shape) - then they are exactly the same, and state is updated in current render too, just like ref! const [count, setCount] = useState({value: 0}); // click count.value++; setCount({ value: count.value }); countRef.current++; console.log(count.value, countRef.current); // both are 1 after first click! or even simpler. Just do to the count what you do to the current: let [count, setCount] = useState(0); // click count++; setCount(count); countRef.current++; console.log(count, countRef.current); // both are 1 after first click!

@cosdensolutions 7 ай бұрын

Sure they might behave the same, but updating state like that won't trigger a re-render of the component so you don't want to do that. If you do then use a ref because that's what it's for. I think the explanation made sense because yes they are different, but serve different purposes

@andrewdatar9880 7 ай бұрын

@@cosdensolutionsSure, your explanation makes perfect sense. It's react API that is too complex and requires explanations like this. And it allows to be misused like in my made up example, and yet it still re-renders and works properly. Even though in my example value of count is changed instantly (just like ref) and not in next re-render. And, yes, it triggers re-render.

@TheRealMinhHoang 10 ай бұрын

Thank you for creating an amazing tutorial, it's truly help me a lot! I have a request, can you make video about using useRef, forwardRef and useImperativeHandle hook in React? Component that managing it's own state. I have always wanted to know more about this react pattern.

@cosdensolutions 10 ай бұрын

already have those :)

@alexdsr1 2 ай бұрын

This a good explanation of useRef. However, there is an issue when using it when Concurrent Mode is activated in React. That's a topic that is even more complex in regards to the usage of useRef. I don't know if you can make a video on but it would help people who are going to run into that issue sooner or later. Thanks