Learn React Hooks: useRef - Simply Explained!

Подписаться 82 тыс.

Просмотров 76 тыс.

50% 1

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!

Опубликовано:

31 май 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 168

@cosdensolutions 2 месяца назад

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

@Engr.SharoonHoney 5 дней назад

That's amazing explanation of useRef on whole RU-vid. Thanks sir 👍

@davidkurniawan1358 4 месяца назад

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

@Pernicuz 4 месяца назад

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

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

@dirtysouth3291 9 месяцев назад

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 9 месяцев назад

Thank you! Glad you enjoyed it 🤙

@haciendadad 8 месяцев назад

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 7 месяцев назад

I really appreciate that!

@SK-fq2yz 4 месяца назад

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

@ZahidHussain-hj2dk 6 месяцев назад

Best useref tutorial.....highly recommended

@psychobuddha5379 9 месяцев назад

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 9 месяцев назад

Happy to hear it!

@vishalupadhayay6391 9 месяцев назад

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

@cheiguerabdelwehab6802 5 месяцев назад

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

@akash.deblanq 10 месяцев назад

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

@akash.deblanq 10 месяцев назад

Liked and subbed.

@cosdensolutions 10 месяцев назад

glad it helped! 🤙

@Arnav404 Месяц назад

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

@lhommeunknown3985 10 месяцев назад

Great video man, really clear explanations !

@zambidzhelov6734 9 месяцев назад

This is the best useRef tutorial . Thansk !

@altan183 3 месяца назад

Very clear and concise, thank you for the explanation.

@jamilibrahimli190 3 месяца назад

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

@erickchavez4551 10 месяцев назад

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 10 месяцев назад

You're welcome ☺️

@vesa95 Год назад

Love this series!!! 🤗

@a_maxed_out_handle_of_30_chars 7 месяцев назад

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

@suhaibsaifan7163 11 месяцев назад

Great explanation! .Looking forward for more series

@adrianayon5513 7 месяцев назад

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

@vincetamayo9669 3 месяца назад

very clear and concise tutorial. thanks for this content

@rushikeshjadhav7748 9 месяцев назад

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

@victortislenko7279 Месяц назад

The best explanation! Thank you

@melikarazavi3599 9 месяцев назад

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

@cosdensolutions 9 месяцев назад

You're welcome ☺️

@official_youtube_1 10 месяцев назад

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

@morofernando639 5 месяцев назад

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 5 месяцев назад

Glad to hear it!

@saschagobbels2177 7 месяцев назад

absolutely great explanation ! thx my friend

@user-og5rw1nk7d 9 месяцев назад

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

@baciusebastian6361 7 месяцев назад

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

@samuelerbo 5 месяцев назад

Thanks man! I learned a lot.

@mostinho7 3 месяца назад

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

@OmG21097 4 месяца назад

Thanks for detailed explanation!!

@kasiakordys266 9 месяцев назад

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

@cosdensolutions 9 месяцев назад

beautiful

@ajays3914 7 месяцев назад

Awesome video brother 😎

@petrus2746 4 месяца назад

Nicely done my man.

@RihaLV Месяц назад

Bro great explanation. Thanks

@esraamohamed5601 5 месяцев назад

Keep doing the best work.

@sankalpsharma3050 3 месяца назад

Thanks Cosden . Good video

@asifmondal7609 6 месяцев назад

Well explained buddy.. Big 👍

@eliyahutarab4862 Год назад

Clear and simple thank you

@cosdensolutions Год назад

Glad you enjoyed it ☺️

@idfk2873 10 месяцев назад

its very healful..great Video

@es7729 2 месяца назад

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 2 месяца назад

yes go for it!

@tariksadkhi3820 2 месяца назад

Good explanation, thanks

@jay-kv6wn Год назад

Great video as always

@pranavjaiswal2379 8 месяцев назад

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

@cosdensolutions 8 месяцев назад

Glad you found it useful!

@guichi200 7 месяцев назад

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

@dejandjosic1258 9 месяцев назад

Very well explained. Subscribed.

@cosdensolutions 9 месяцев назад

🤙

@rennjaysoterio2543 7 месяцев назад

Great explanation!

@mohit6847 7 месяцев назад

Thanks for the video, it was a good explanation.

@pp-studio 2 месяца назад

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

@user-hl9us2id5i 5 месяцев назад

Best explanation 🎉

@pravinharigaikwad 11 месяцев назад

Great explanation 👏

@cosdensolutions 11 месяцев назад

🤙

@starfinitex 3 месяца назад

I really enjoyed it and understood

@julienheng3880 5 месяцев назад

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

@cosdensolutions 5 месяцев назад

There's a playlist full of them!

@milindkhadse556 Месяц назад

Helpful information thank you

@prafullkumar6369 Месяц назад

Very nice explained

@user-jn2rs3rw3x 4 месяца назад

now I cant forget this, tq!

@zabialy2919 7 месяцев назад

Great video, keep it up

@AhammedShaheedhudheen 5 месяцев назад

you Earned a subscription

@blackfortmusic7729 Год назад

Growing fast man!

@cosdensolutions Год назад

🤙

@ahmednabeel358 8 месяцев назад

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

@CodingWithDapo 9 месяцев назад

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

@cosdensolutions 9 месяцев назад

You're most welcome ☺️

@chamalsena Месяц назад

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

@akankshagunti5301 3 месяца назад

Loved it 💌

@fatemeh-azad Месяц назад

Thanks man this is awsome

@FGA-47 9 месяцев назад

Thanks that was really helpful❤🫡

@cosdensolutions 9 месяцев назад

🫡

@rubyc7771 2 месяца назад

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.

@samahgad241 5 месяцев назад

Realy, thanks alot😍

@maheshranjankar2127 Год назад

i love this man 🙏🎉

@enafor99 Год назад

Great tutorial thanks

@cosdensolutions Год назад

🤙

@leonardmbibi8013 8 месяцев назад

Guy, you rock!

@nickytomar959 10 месяцев назад

Really awesome ❤❤

@chadaramprasanna9259 4 месяца назад

Thanks bro. 💯

@alexdsr1 23 дня назад

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

@nabilachehlafekir8577 8 месяцев назад

thank you so much ^^

@malayalenka9164 6 месяцев назад

Awesome!

@ankitputhran 5 месяцев назад

Very helpful

@supplyuniquenotessun4562 8 месяцев назад

respected .. very thanks

@andrewdatar9880 6 месяцев назад

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 6 месяцев назад

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 6 месяцев назад

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

@AhmedHuzain 5 месяцев назад

Thank you!

@debos_me 3 месяца назад

Very useful

@pasinduvinsuka 6 месяцев назад

Thank you so much

@someChicoRy 9 месяцев назад

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

@saadchraibi6712 10 месяцев назад

Awesome, straight to the point! Could you make a video about custom Hooks?

@cosdensolutions 10 месяцев назад

Already have ☺️

@saadchraibi6712 10 месяцев назад

@@cosdensolutions would you mind sharing the link? I can’t find it

@cosdensolutions 10 месяцев назад

@@saadchraibi6712 check my channel -> playlists -> custom hooks (there's only one video but there will be more)

@mahdighasemi9518 9 месяцев назад

Thanks a lot.

@TheRealMinhHoang 9 месяцев назад

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 9 месяцев назад

already have those :)

@emmanuelareiza9699 8 дней назад

TY Bro

@sonnyl2915 Месяц назад

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

@VishalSharma-rn7mt 5 месяцев назад

Awesome

@learner8084 10 месяцев назад

If count updated before the rerender or exactly when it rerenders ? I understand it's async, so I thought it would be anything before the rerender ?

@cosdensolutions 10 месяцев назад

With state, the count changes in the next render. The component basically does this: 1st render Count is 0, all functions are created, and UI is rendered Click increment count Schedules count to be +1, runs rest of code with count still 0 2nd render Count is now 1, UI renders accordingly. With ref, the render part is skipped, it just directly updates the count with no render. So that's why it won't update on the screen but in code yes