Learn useRef in 11 Minutes

🚨 IMPORTANT:
Full React Course: courses.webdevsimplified.com/...
In this video I cover everything you need to know about the useRef hook. I go over all the main use cases for useRef as well as many common mistakes that developers make. This is part of a series of React videos where I cover all the important hooks in React.
📚 Materials/References:
useRef Blog Article: blog.webdevsimplified.com/202...
React Hooks Playlist: • React Hooks
🧠 Concepts Covered:
- How to use hooks in React
- How to store values between renders in React function components
- How to use the useRef hook
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ReactJs #WDS #useRef

[@dhruvmaindola5767]

If anyone is still confused about the last example. Here is a simple explanation. Just keep three things in mind. 1. useState() causes re-render. 2. useRef() DOESN'T cause re-render. 3. useEffect() runs AFTER render. So the flow goes like this. name = "" prevName = "" -> Lets say you put "A" in the text field , so setName() runs. Changes the value of name = "A" to this. Component renders. -> Then useEffect is run where you set prevName to name. prevName is the same as name which is "A" but here comes the 2nd point i wrote. useRef() DOESN'T cause re-render. -> So when you changed the name , component got rendered and useEffect caused the prevName to change. But the thing is that component has already been rendered with whatever value prevName HAD before setName() got called. prevName is not STORING the previous value of name. It is only DISPLAYING the previous value of name. Hope this helps.

[@omyerawar7976]

Great Explanation 🤩

[@user-zv6bv7eu8k]

Is it safe to say that useEffect() uses the data from the previous render ??? and I understand we store it in a useRef() since it wont cause a rerender .... but what's the difference using a useRef() variable oppose to just updating a normal variable ... NEED HELP

[@waynerandom11]

@@user-zv6bv7eu8k Because if you change the declaration to be const prevName = , then prevName would be set to at the start of every re-render whereas const prevName = useRef() will set prevName to only on the first render. Subsequent renders will set prevName to the whatever the last assigned value was. Hope that helps!

[@sarveshwarpandey9516]

thanks!

[@dongbinkim3773]

@@waynerandom11 Thanks for your great explanation!

[@Gabrielito300]

I rarely use to comment on videos, but i think this video deserves an specific acknowledgment. It was an excellent explanation about useRef, and the way that you showed the difference between it and states is super important. I hope you keep helping us, amateur web developers, to keep improving. Hope you have a lovely weekend ❤

[@WebDevSimplified]

Thank you so much!

[@mattmarkus4868]

i agree. i would like to see more advanced stuff, because he explains things very well and clearly.

[@cristianouzumaki2455]

I might purchase your course despite already knowing react. great vids bro.

[@WebDevSimplified]

Thank you!

[@shyambhujel8797]

@@WebDevSimplified c b0

[@shyambhujel8797]

@@WebDevSimplifiedy yyyyyyyy

[@shyambhujel8797]

@@WebDevSimplified hhyyt5

[@siddheshb.kukade4685]

Lol

[@elie3423]

for people confused of what is happening in the last use case of useref, useEffect by definition runs after the things gets rendered. so he is basically printing the value of the useState before assigning it in the useEffect

[@anandkrishnanmj95]

Thanks for clearing that, have been looking through the comments to figure that out.😃

[@anandkrishnanmj95]

And after the render, useEffect gets called and changes the value of prevName.current to current name, And even though the prevName.current currently holds the current name after useEffect, it won't trigger a re-render And that's why the prevName.current used in the return statement prints the previousName right?

[@veselinmladenov7941]

Thank you for that Elie, I spent a decent time trying to understand what is going on and why is behaving that way.

[@zksumon847]

Thanks a lot

[@marco8673]

thank you very much!!!

[@wawayltd]

I hope this comment will help someone who can't get a grip on it like I couldn't for some time... When you are trying to understand logic of these processes explained in the video, just keep in mind one important thing - useEffect() only runs AFTER your component is rendered. Like in the last example where we trying to get previous value of our name, I would say that prevValue.current is not actually storing the value of our previous name, it displays it as component renders - then useEffect runs, prevValue.current now storing value of current name, but because useRef doesn't make component to re-render, it "keeps that in mind", but doesn't display it till the next time component is rendered. Oh gosh.. I was hoping I'll put it simple. I hope it makes sense. It took me while to figure out logic and I feel need to share it with people.

[@avineshgupta6264]

Thanx dude

[@bikerguy3338]

I was struggling to understand this too. Thanks for clarifying what's happening!

[@balluvwdwadi8995]

Thank you!🎉

[@AbhishekBhandari-om9hu]

thanks

[@daniillitvinenko4348]

Thank you, I was specifically looking for this in the comments

[@mrarc197]

Im using most of things you teach on daily basis but I am still watching your videos and in many cases Im finding gems that I never even thought about. Good job mate, keep doing it, its good content.

[@luis_soul1]

I struggled a little bit trying to understand Ref in React and I constantly found a bunch of explanations with examples but no other like this video. It made me understand everything. Thank you so much Kyle, shout out to you for explaining Ref very simple and concise.

[@sudarshankj]

What I truly love about your videos are: They are really crisp and cover the crux of the topic magically in a very small amount of time! That takes great skill, keep it up!

[@liamwelsh5565]

Little shortcut. Instead of doing const something = useRef(), you can use object destructoring and set it to const {current: something} = useRef(). This allows you to access your ref without needing .current.

[@Tommy-x-Ray]

doesn't work, because you have to set ref={something} later on

[@nazarabdurakhimov2859]

Hey Kyle, I'm watching some paid React course, but when something is unclear, I open KZbin and specifically look for your videos - I find them super useful, you can explain difficult concepts in a clear and relaxed way. I can see how every aspect of your videos (intro, speech, explanation, examples) are thoroughly thought out. Thx a lot for all of your effort!

[@sakshichoudhary7842]

Finally understood Refs properly.. You are a saviour❤️

[@exceptionalbuildingservices]

Mate I watched so many videos and read so many articles, but I never saw anything like yours! Short and very well explained. That's what I needed! Thanks!!!

[@zain2314]

bro i have been following your tutorial and none of them have failed to amaze me, your explaination is so onpoint and simple.

[@starwarsfan9575]

I don't get time to learn by myself because of busy work schedule but through your quick and easy videos like this one I am able to....thanks! Keep up the good work!

[@balajiganesh4246]

That was super useful bro. I always felt this concept was too complex and always avoided it. Now, I have a decent clartity within 10 mins. Thanks a lot

[@quietcalm7299]

I never comment on videos but this explanation was so spot on - it helped me so much converting a tutorial that was using dom selectors into react-syntax. So thanks a lot :)))

[@jackmiller2518]

Straight forward, Perfectly explained with no bs, thanks a lot!

[@alizarean5080]

after searching for about 5 hours this video finally answered all my questions. I can't thank you enough buddy. I wish you the best of bests.

[@nigelbess5168]

Your content really breaks these down in a useful way. Thanks so much, youve saved me a lot of time.

[@gerasmaster2099]

Every time I need to learn something new about JavaScript, I look for your videos. You explain everything so clear it couldn't be better

[@csmnitemare4532]

These vids are gold!!! thank you for helping this aspiring dev understand things that some seem to just gloss over or explain horribly.

[@raffibags]

By far the best explanation of the useRefs hook I've seen. Well done.

[@temzeks]

not gonna lie, i went through the useRef from one of the react books today, and i didnt understand what it was, this video somewhat made it brighter for me, but not entirely. Gotta rewatch it in the morning! Keep it up

[@IvinAustan]

Really had a great experience of knowing all the react hooks use cases. You did a very good job. Kudos, man!!!

[@tejasmuthya4492]

GOD BLESS YOU! I have a React interview tomorrow and feel very confident after watching your useMemo, useCallback and useRef videos!

[@franco-cespi]

As with useMemo I thank you for thining down the difficult concepts of React. Greate examples! I can't wait to see some more hooks simplified.

[@user-fg6ng7ej6w]

this playlist is very helpful: clearly explained, yet complete and concise. thanks.

[@chrtravels]

Great video. Your videos make the topics so easy to understand, thanks for that. I know enough react to get myself into trouble so looking to purchase your course to get some extra depth on the topics.

[@nareshbhati7527]

Thank you, you always give new knowledge. In 10 minutes you clear the concepts of 1 hour. Thank you so much for saving us a lot of time.

[@lpaddikt]

Your videos are always such great content and really like how you make it concise. Awesome job man!

[@motilimkayes1352]

Wow, thanks man, I'm going to re-watch this playlist every week or so for some time.

[@sam12345393]

Awesome explanation dude, I hardly comment on tech tuts, you are just so eloquent and precise. Keep up the good work!

[@iamnadeemzafar]

I was googling for the actual use case of useRef and after long time i got satisfied watching your video ... You told exactly what i wanted to know.... A lot of tutorial had the same caption but not worth satisfying. And the most appreciable is that you only took few minutes..

[@teletoby94]

Thank you for the concise and easy to understand explainer. Love this and appreciate your work.

[@khgriffi]

Excellent tutorial on refs! Just what I needed.

[@andrewsmichael7047]

Thank you so much bro, I used to be confused about refs most times even the react docs didn't make it as clear as this video. Thanks a lot

[@sleepingUgly]

Great video. Thank you for showing the different use cases. I had no idea that it is not in included in the lifecycles and persists data.

[@anilsuyal]

Wow! what a straightforwad amazing explanation to useRef. I was tired understanding it from lot of videos and docuementation, but understood only because of you. thank you sir

[@Ichigo-kurusaki580]

Dude you explain such topics so good with easy examples and simple usecase that before even going anywhere else to understand some concept i made it a habit to go through your videos first. Thanks for uploading

[@Rodo1802]

I love you, Kyle! You’ve made my React Day with this video. 🙏🏼 thank you!

[@georgimihov2690]

Thank you for all the amazing videos. Always very accessible and to the point.

[@wcw23085]

YOU ARE A LIFESAVER!!!! Been searching for how to reference a DOM node in React and here you are showing me what I've been looking for the WHOLE DAMN DAY. THNAK YOU!!!!!!!! AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

[@rayanfernandes2631]

Clear cut explanation ... Thanks kyle.. You are amazing person.

[@dimitmoto1716]

Everything clear! Thanks a lot!

[@adammescher]

Magnificent explanation. Thank you!

[@KamilHussainShaikh]

The quality of your presentation is appreciated. Thank you for the videos. May Allah reward you for your efforts.

[@fahmidatasnimlisa2592]

I'm pulling an all-nighter and i got my final exam on React in a couple of hours. Thanks for the video, so greatly explained

[@atheerapeter5174]

I was wondering about how to grab elements in react and this golden video popped up so thank you so much

[@williamdaghouz]

Your explanations are really great!

[@cobaltninjas]

I honestly never thought of using useRef for anything other than DOM elements. This is brilliant.

[@jesusidev]

Great video. Forward ref is another good one since we build components and share those.

[@ascourter]

Great video. Very clearly explained. Thank you!

[@k.l7111]

Clear comparison with useState and nice explanation of rendering lifecycle. Thank you!

[@deepanshukhorwal8938]

your content is fabulous and most useful for working professionals

[@mtsurov]

Best 10 minutes I've spent today.

[@ambrozykleks626]

Great stuff, sir. Never thought about Ref that way.

[@chunkwanchan5503]

thank you! think this hook really shed light on my mini project. I can save the previous dom state and render it back on the page now

[@kingkesylo8516]

Thanks very much for your videos. all the hooks you explained really makes sense to me now so thanks Mann

[@tarekghosn3648]

thanks i look forward to my project finishing and being able to say your videos were abig part of it

[@Skalexsong]

Another great videos that I missed. Thank you !

[@yusufaltundal3482]

Thank you for this beautiful explanation.

[@AadeshKulkarni]

Beautifully explained!!

[@LongBoy.0]

Finally an amazing explainer on useRef. Thanks!

[@juanignaciodominguez5902]

You really simplified my life. Thank you!

[@wichaisawangpongkasame9237]

Great explanation and warning. Thanks.

[@abrahamgeorge7466]

Very high quality content.After watching many useRef videos ,i only understood from your video.

[@devidasa9637]

Excellent series of videos..bravo!

[@mpilodlamini8407]

Massive respect to you thanks for these hooks tutorials. I am hooked no pun intended. Thank you.

[@29rohitkumar01]

It's always great to watch your video, Even if I know some topic and watch your videos, there is always something new that I get to know. Keep doing the good work brother.

[@HarshKapadia]

Really nice video! Thank you for (purposely) making those errors, they really helped me understand things.

[@b1ackbrd1]

After watching this I used it in one of our Video player component and its just awesome. Thanks a lot for this video

[@MusTarIzCyx]

Brilliant explanation, thank you very much!

[@dustindurden3090]

Your content is absolutely amazing. Thank you so much for putting out this helpful Information

[@aldhie33]

thank you so much. i spend two hours read the doc and it still confuse me, but with your explanation, it makes me understand the way to use this hooks. 😲😲

[@durgaprasaddas6494]

Man!! this is the most informative and well explained.

[@0x0abb]

Web Dev Simplified is so awesome - I agree -one must show gratitude - great work!

[@fmaciel2]

Great tutorial! As usual, by the way. Thanks a lot!

[@natnaelsisay1424]

No words, Just Thank you brother

[@petarkolev6928]

Extremely useful video!!! Thank you so much, Kyle!!!

[@yassinerassy6840]

thank you for your amazing explanation and useful real cases study !

[@zxph]

Amazing. Thank you so much, Kyle!

[@julien2057]

Crystal clear. Good job.

[@jayantakumarroy543]

I really like the calm voice without super hyped energy,coz that's what i need for an educational video

[@filip23128]

Great explanation, thanks!

[@skooliecaptain]

Absolutely saved me with this one! Thanks

[@abishekbaiju1705]

Thanks for the great explanation.

[@atreysinainadkarni5453]

This is really helpful, thank you.

[@dmytro-skh]

it is really surprising how good you are at explanations

[@karthickr1994]

This guy deserves a like. Impressive mate. Thank you.

[@FL4M3M4K3R]

perfect explanation, so i dont need any more videos about topic. Its high level, thank you Kyle ;)

[@viniciusalvess]

I had a situation where I had to read qr codes, but the qr code component triggered and event multiple times when the camera was reading the qr code because of motion and low delay tim. I couldn't increase the delay time, because it would take too long to scan many qr codes and useRef hook helped me to solve my issue. Thanks Kyle for the great video.

[@micaeldie8584]

You blow my mind best video ever! keep the great job

[@andreranulfo-dev8607]

So happy to see this Channel almost reaching 1MI subscribers.

[@sambass827]

Awesome explanation!

[@amitborkar2892]

You really explained it in an easy way mate. Could you also make a video on React-router?

[@raghavsingh5592]

You solved the problem for which I sat for hours. Thank you very much.

[@vadimm3077]

Cool content! Thank you so much for your knowledge sharing!!

[@nextleveltech267]

Super useful content... Thank you so much ❤️..

[@miskaknapek]

many thanks for the very clear and concise explanation! I'm not sure how you managed to do it as fluently, in one clip. ( hope you didn't need to do too many retakes ;) many thanks in any event!

[@saranshmehra8577]

I somehow stumbled upon this video... Amazing Content.!! just wow!!. If you wanna learn refs then this is the ultimate source.