Creating a Timer

[00:00:00]
>> Kadi Kraman: Now we're going to build our counter feature. So I'll call this counter. I'm not very good at naming things, but basically what it's going to be, is it's going to be a reminder for you to do something that you need to do regularly. So, for example, wash the car or take out the bins or change your bed sheets, something like that.

[00:00:25]
So we're going to build a UI. So it will look a little bit like this. So this is what we're going to start with. So we're going to say that the thing that you need to do is do in how many seconds how many minutes, how many hours, how many days.

[00:00:43]
And when the thing that you're meant to do is overdue, we're going to have this garish red color. So you would really see the thing you're meant to do, you're late doing it. And the idea is that you could press this button saying that you've done the thing and the countdown will reset and you'll schedule a notification in the future for you to do the thing.

[00:01:09]
So to start off, how do we render a UI that updates every second? So this is where it actually get more complicated now with React compiler because React compiler, being the clever thing that it is, doesn't update UI elements that haven't changed in state. So that's something to bear in mind if you're building a UI that needs to update every second.

[00:01:39]
Let's open Our counter screen. So this is this index screen. So let's just see how do we create a component that just renders seconds, elapsed, so update every second. I'll do a useState here. So useState. And let's start with 0. And this will be our seconds elapsed. And set seconds elapsed.

[00:02:25]
>> Kadi Kraman: So, we're not gonna keep this code indefinitely. Just gonna render this in the text so we can see it on the screen.
>> Kadi Kraman: All right, I want update this set seconds elapsed every second. And to do that we're going to use a use effect and an integral.

[00:02:45]
Two very dangerous things to be used sparingly. So let's do a use effect. Remember this takes in a function and we only want to run this once when the component is initially rendered. So we'll pass in this empty array. Now we want to create a Node.js interval So we'll do setInterval, so this also takes a function.

[00:03:21]
>> Kadi Kraman: And the second argument is, so the first argument is something to do after this interval, and the second argument is how long you want the interval to be in milliseconds. So we want it to be one second, which is 1000 milliseconds. So in this Interval, we want to set seconds elapsed.

[00:03:45]
And in this case, so we can't use the seconds elapsed from the used state because this function only has access to the things that are in the use effect, so this is not going to update. But use state functions with the setState, you can also pass in a function rather than the new value.

[00:04:08]
So the function tells you what the current value is. So we'll take the current value and we'll increment it by 1. So val + 1.
>> Kadi Kraman: And the last thing, and this is very important if you're ever dealing with intervals or anything that you're setting up to do asynchronous things in the background, you want to make sure that you tidy up after yourself.

[00:04:33]
So you need to clear the interval when the component gets unwanted. So this set interval actually returns a number, which is through interval ID. So cons, interval ID. I guess you can see this is a node.Js timeout, and in a use effect, you can actually return a function.

[00:05:00]
And this gets run. So this is like, if anyone remembers class components, this is like, before unmount, like a component lifecycle. So this gets run just before the component gets unmounted. So here we'll do a clear interval to tidy up our intervalid. So this ensures that we're not gonna have multiples of these intervals running at the same time.

[00:05:32]
So now when I save, you can see that my little counter has started incrementing. And when I reload,
>> Kadi Kraman: It will start from zero again. So if you don't do this clearInterval and you reload, you'll see that the counter is starting to count multiples at the same time.

[00:05:55]
So if you're seeing that effect ever, then you've probably forgotten to clear your past time. So if you see that, you've probably forgotten to clear your previous timeout. Okay, so a library that I pretty much always install on all my projects when I have to deal with dates is date-fns.

[00:06:11]
It's one of two libraries that are really popular for dates, I think date-fns is a moment. And this is a great example of a library that you might have used on the web and it also works in react native which is amazing and the main things that I like using in date-fns is that you can format so i'm going to use this here as well but you can format a date given like this format structure.

[00:06:42]
You can get a distance. Yeah, format distance and format distance trick. So this is really handy. Because, in words, you can say how long ago something happened. So rather than saying that, this happened in May the 4th, it will actually tell you in words that this happened 12 days ago.

[00:07:13]
>> Kadi Kraman: And it has a bunch of other utility functions.
>> Kadi Kraman: So, let's install a date-fns. So, we're using npx.xor.install, and the previous time that I pointed this out, we had an example of a thing that we installed that said. Over installing an SDK, whatever compatible package. And this is actually an example of a library that doesn't have an SDK compatible package because either we don't track it or we just assume that it's always going to be compatible.

[00:07:54]
And this log here prints out that whether it was an SDK compatible package or not. So here it says installing one other package and other in this scenario means that it is not tracked to be SDK compatible. But this is just to show that you can install pretty much all libraries using mpx export install.

[00:08:18]
So it's just a nice default to get into.