Learn useRef in 11 Minutes

🚨 IMPORTANT:

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:

🧠 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:

#ReactJs #WDS #useRef

[dhruvmaindola]

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.

[elie]

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

[Gabrielito]

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 ❤

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

[cristianouzumaki]

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

[mrarc]

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.

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

[luis_soul]

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.

[nazarabdurakhimov]

Hey Kyle, I'm watching some paid React course, but when something is unclear, I open YouTube 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!

[sakshichoudhary]

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

[starwarsfan]

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!

[quietcalm]

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 :)))

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

[balajiganesh]

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

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

[liamwelsh]

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.

[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

[zain]

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

[csmnitemare]

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

[gerasmaster]

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