Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
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.
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
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.
When he said after watched his video you don't to watch another video with same content again. For me yup because clearly simple and explanation there actually no need.
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"?
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
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
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!
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
@@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.
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
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.
@codeson - That's interesting but I have one question. Add setCount and print countRef.current and count both. And when you click button, UI shows updated value for both. but countRef.current shouln't right ? If you remove setCount and click btn countRef.current then UI won't update... hows that possible ?
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.
Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
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.
Happy to hear it!
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!!!
Great job! Your videos have been really clear and provide straight forward examples even explaining some of the gotchas of react
Really glad you're enjoying them!
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
Thank you! Glad you enjoyed it 🤙
These guides are incredible. You made me understand clearly in 3 videos what my teacher couldnt in 3 days
Finally, I understood useRef. You explain very well my friend. Thank you!
Liked and subbed.
glad it helped! 🤙
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.
I really appreciate that!
Wow... I spent hours on it, when I used states and didn't understand why its not changing it immediately... So grateful !
Thank you man!
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.
You're welcome ☺️
I watched many videos on useRef but didn't understand at all. Now it makes me really clear.
Best useref tutorial.....highly recommended
Thank you very much. It really is the last useRef video i would ever need.
When he said after watched his video you don't to watch another video with same content again. For me yup because clearly simple and explanation there actually no need.
i always found your tutorial professional without any waste.
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"?
yes go for it!
great explanation, Exactly what I was looking for
It clears many doubt about state vs ref.
count a like from me.
This video helped me a lot! Great examples! Keep up the good work :)
That's amazing explanation of useRef on whole RUclips. Thanks sir 👍
Earned a subscribe! Thank you for explaining this super clearly and explicitly.
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
Glad to hear it!
Thanks for the clarification i really understood the difference between the useref and usestate you made my 12 minutes worth
Glad you found it useful!
I have watched it 3 times and finally got it :-) thanks, great explanation
beautiful
you did an excellent job in explaining things with examples in short amount of time. Give me more tutorials lol
There's a playlist full of them!
useRef is very complicated for me , you make it simple .Thank you a lot!
You're welcome ☺️
Amazing, I enjoy watching your React lectures!
love your explanation. every thing is clear now about useRef, thanks!!
Nice video and appreciate the time and effort that you put into developing quality content.
Thanks, you explained it in a very simple way👌. I want to learn Express from you.
Thank you so much, this video helped me in my interview, specially the re-rendering part
thank you for the explanation. this hook makes a lot more sense to me now
Thank you so much , i was realy confused when read the docs , but now it's clear much more better!
wow, simple and to the point
thanks a lot :)
Thank you, very good explanation!! You helped me a lot!!
A really good deep dive on hooks for me. Thanks
Thank you so much, I have wasted so much time searching for this simple answer.
You're most welcome ☺️
This is the best useRef tutorial . Thansk !
Love this series!!! 🤗
awesome I now understand . Thanks for the explanation. i'm looking forward to watching more of your videos
Very clear and concise, thank you for the explanation.
very clear and concise tutorial. thanks for this content
thanks buddy, a pretty good video keep it up!
really good explanation, thank you for the video, really appreciate it
This video not only made me understand useRef better, you just made me realize how react re-renders work :D Thanks man.
Glad to hear it!
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
Great explanation. Thanks!
It's really understandable. Thank you ❤
Amazing explanation 🎉
You will be famous one day keep going 🙂 thanks a lot
really nice explanation. thanks a lot.
Great explanation! .Looking forward for more series
Loved this series man !!
btw whats the vscode theme ?
Hats off to you sir! Great explanation for a beginner like me
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!
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
@@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.
Great video man, really clear explanations !
Many thanks for this clear explanation. 💗💗
absolutely great explanation ! thx my friend
The best explanation! Thank you
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
Nice example. Thanks
Growing fast man!
🤙
Great explanation 👏
🤙
Thank you brother go ahead👍🏻👍🏻
Awesome video brother 😎
Nicely done my man.
Thanks for detailed explanation!!
Clear and simple thank you
Glad you enjoyed it ☺️
Great explaination
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.
Keep doing the best work.
Thanks man! I learned a lot.
now I cant forget this, tq!
Well explained buddy.. Big 👍
6:52 UseRef vs useState : triggers render?
8:29
Using ref on element
Etc:
- hooks runs after render
hmm, I don't get it?
love your explanation!
Very well explained. Subscribed.
🤙
Ho Wow. at 6 min it clear my mind.
awesome, thanks.
Thank you so much for your incredible explained for react hook. it 's make me supper clear. 🥰
Bro great explanation. Thanks
Thanks for the video, it was a good explanation.
Best explanation 🎉
Pls do a series on react beginners completing all concepts
Thanks Cosden . Good video
Good explanation, thanks
Very nice explained
you Earned a subscription
Great video as always
Awesome, straight to the point!
Could you make a video about custom Hooks?
Already have ☺️
@@cosdensolutions would you mind sharing the link? I can’t find it
@@saadchraibi6712 check my channel -> playlists -> custom hooks (there's only one video but there will be more)
I really enjoyed it and understood
its very healful..great Video
Thank you !
Great explanation!
Thanks that was really helpful❤🫡
🫡
Many thanks Bro
@codeson - That's interesting but I have one question. Add setCount and print countRef.current and count both. And when you click button, UI shows updated value for both. but countRef.current shouln't right ? If you remove setCount and click btn countRef.current then UI won't update... hows that possible ?
Great video, keep it up
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.
already have those :)
Helpful information thank you
thanks for the video
best explained