BUILD a React Timer with useRef | React Hooks useRef Tutorial

[@DaveGrayTeachesCode]

React state has some limitations. That's where React references come in handy. In this tutorial, you will learn some common uses of the useRef React hook, and we will also build a React timer by persisting values with useRef. Just getting started with React? I recommend my 9 hour full course React tutorial here: kzbin.info/www/bejne/iIepcqx8jLRnndE

[@csfundamental1977]

You are million times better than those young punks teaching and making simpler things harder. I rarely likes the video but doing it for algorithm, you deserve more views sir. Keep posting good stuff.

[@DaveGrayTeachesCode]

Thank you! I appreciate your comment 🙏💯

[@bobbyboxer2664]

One of the clearest examples I've seen in a while. Thanks Dave 👍👍😁😁

[@DaveGrayTeachesCode]

Glad it was helpful!

[@TruthSeeker23-m4o]

we are waiting for Typescript course dave. Many people are looking forward to it ReactwithTypescript. Also you are a Natural Teacher hats off god bless :)

[@DaveGrayTeachesCode]

Thank you for the kind words! 💯

[@ginogarcia8730]

ah man! I hope this video gets shared more to make a timer or countdown in react, it's so simple compared to the others!!!!!!!!!!!!!!! i put alot of exclamation points because i finally found salvation haha and you explained things so simple and great. you even helped someone fix the plus clicks on start timer bug.

[@DaveGrayTeachesCode]

Glad I could help!

[@lix5694]

Thanks!! Very good examples.

[@robdev89]

Hey Dave! Just discovered your channel! I love your content, straight forward and easy to understand. Thanks.

[@DaveGrayTeachesCode]

You're welcome! 💯

[@allegy2414]

Great video! I wanted to make simple page of two timers and this video made it a lot easier. thanks!

[@DaveGrayTeachesCode]

Glad I could help! 💯

[@siddiqahmed3274]

That's cool.... I think you should put a full react project using hooks so we may learn how to put together a react application in a reactful way. Btw thank you for all great videos❤️

[@DaveGrayTeachesCode]

Thank you Siddiq! 🙏 I will do that 💯🚀

[@vincent3542]

Hi Mr Dave, I really looking forward for your courses on typescript and react, Redux... You are amazing teacher 🙏❤️👍

[@DaveGrayTeachesCode]

Thank you for the kind words, Vincent! 🙏🙏

[@ashvb1085]

Amazing tut Dave! A very humble request! Please create a detailed tut on use of SocketIO with react and how we can handle realtime data updating in React. I looked up at some online tuts but am not able to understand their workarounds with useRef and useEffect while using the socket on client! Your sincere student!

[@DaveGrayTeachesCode]

Thank you, Ash - and thank you for the request! 💯

[@sonamohialdin3376]

So good tutorial about this hook

[@DaveGrayTeachesCode]

Thank you, Sona! 💯

[@md-abid-hussain]

Thanks for this lesson Dave. Explanation was great. However there is a bug when we click start timer more than once the counter will increment more than once in a second and i doesn't stop even after clicking stop. And thanks to your past lesson I was able to solve this easily. Looking forward to learn more from you

[@DaveGrayTeachesCode]

You're welcome and concerning the bug you mention, I wasn't thinking about this as an app but rather just as an example. Sounds like you implemented the fix you wanted and that could be prevented in a couple of ways.

[@ChaiPark]

Thanks for the awesome tutorial, Dave! I really like the way you explain it and have followed several videos. Is there a certain reason that you used useRef() for 'timerId'? When I tried to use useState() for timerId, it also worked. Could you explain why you used useRef() for the timerId bit more?

[@DaveGrayTeachesCode]

useRef provides the same object reference on every render. That is why it can be used to count renders, but useState will not do this. The renders.current++ you see is not possible otherwise. I hope this helps!

[@Sky-yy]

Amazing.

[@DaveGrayTeachesCode]

Thank you! 💯

[@ghostintheshelf8660]

Thank you for a lesson, Dave! I'm a beginner in react and I don't get why do we need to set another useRef(timerId) for our setInterval function... Could someone explain why can't we just use regular variable to name our setInterval? thanks!

[@Netpilation]

you must have forgotten ,but you could have incremented the renders value inside useEFFEt and there was no need to increment in every function

[@fredylagartija]

Hello Dave I made the same example but I used renders as state instead of useRef and got the same result, so what would be the difference?

[@DaveGrayTeachesCode]

You just stated the difference.

[@ahmad-murery]

Just another great video , So, useRef() will return the same object on each render (each call to App function), What if we increment (renders) directly inside the App function and not inside any of declared handlers? this way we'll get the (renders) updated without worrying much about what triggers the rendering process, besides, it will count the initial render, Thanks Dave,

[@DaveGrayTeachesCode]

As always, a great comment my friend! 💯 Edit: I wanted to add this will work if you are not using (check your index.js)... otherwise, StrictMode will double invoke render in an effort to detect side-effects with the render count doubling when only inside the App function and not inside a handler. More on this here: reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects 🚀

[@ahmad-murery]

@@DaveGrayTeachesCode I really liked the way you're starting this series of videos recently by presenting a problem then explaining why and how to fix it ✔

[@GabrielMartinez-ez9ue]

Dave, is there a way to contact you regarding a question? I am getting an undefined when setting an adding an event to useRef function. Maybe you can spot the bug.

[@DaveGrayTeachesCode]

Hi Gabriel, I cannot take the time to debug all viewers code, but I do suggest you download the source code from the link provided in the description. From there, you can compare your code to mine to find the differences.

[@andrelis777]

Hi, Dave. What are the downsides if we declare the timerId variable outside the App function and then manipulate it instead of using ref?

[@DaveGrayTeachesCode]

I would need to explore that route as I made this video to demonstrate the useRef hook a few months ago.

[@dimastriraharjo1284]

Hi Dave, I found a bug in the timer. When clicking the start more than one, as we expect the counting is faster as clicking two times means +2 each but that when clicking stop, the counting only stop the latest start, the rest counting still continue. What's happening there? How can we completely stop all the counting?

[@DaveGrayTeachesCode]

It has been awhile, but if I remember correctly, that bug was intentional to demonstrate what you described as expected. Either way, simple example for demonstration purposes only. If you want to clear any previous timer before starting another one, add this line of code as the first line of your startTimer function: if (timerId.current) clearInterval(timerId.current);

[@dimastriraharjo1284]

@@DaveGrayTeachesCode ok now its not going to double the interval because of checking the timerId is the same but I still dont quite get it with this .current is it like mentioning the current id of something that can be use to do something?

[@DaveGrayTeachesCode]

@@dimastriraharjo1284 the current property always hold the value of the ref you create: reactjs.org/docs/hooks-reference.html#useref

[@quasi_verum]

the timer has bug, while you click start multiple time, the timer become faster. and can't be stopped.

[@DaveGrayTeachesCode]

I haven't checked this, but if it is an issue, you could disable the start button after clicked until it is stopped.

[@asthedreamfadesaway]

Hey Dave I was wondering, why is it bad to manage input values with useRef? In case I don't need my app to re-render each time my input value changes, what should I use? I wonder if that is the approach the library react-hook-form used to optimize the input re-rendering

[@DaveGrayTeachesCode]

Good question, Diego! 💯 That is not the *normal* React approach to state, but it can be accomplished. There is a long article on it here: www.smashingmagazine.com/2020/11/react-useref-hook/ ...That said, React-Hook-Form does not seem to be using this approach. I didn't dive into exactly what is going on in their custom hooks though. There is some reference of their optimization in the docs here: react-hook-form.com/advanced-usage/#ControlledmixedwithUncontrolledComponents

[@AM-nm6ts]

hello :) thanks a lot!!! just to confirme, it's a bad practice if I use useRef instead of useState to grab the input value to avoid a rerender ??

[@DaveGrayTeachesCode]

I would only do that if necessary. useRef exists to persist a value between renders when needed, but not to avoid renders.

[@AM-nm6ts]

​@@DaveGrayTeachesCode TANK YOU A LOT 🙏❤👍 thank you for your time and the answer