All right, the first thing we'll do is create a new function called tick.

This is going to be the most essential piece of our stopwatch.

All the code that involves making the timer tick second after second will be

written here in the tick function.

In order to produce a timer that updates or ticks by the second,

the tick function will need to be called continually as long as the stopwatch

component is mounted onto the DOM or as long as it's visible on the screen.

So how we call tick over and over again?

Well, we don't wanna call it in the render method because render is for

rendering only.

Instead, we can use one of React's built in lifecycle method.

In React, every component instance follows a cycle.

It's mounted onto the DOM, it's updated with changes in data, and finally,

it's unmounted from the DOM.

This is referred to as the component lifecycle.

React provides built in lifecycle methods

that get called at each point in the lifecycle.

The lifecycle methods act as hooks you can run code at key times in your component's

life cycle.

This gives you the ability to control what happens when a component mounts,

updates and unmounts.

The lifecycle method you'll likely use most is called componentDidMount().

So let's implement this method inside the stopwatch class.

Below the state object, write componentDidMount().

Usually, any custom methods or functions you write need to be called somewhere

like with an event or from inside another function, for example.

The componentDidMount method gets called by React as soon as a component is

inserted or mounted into the DOM.

For instance, I'll console.log the message,

the stopwatch mounted inside component did mount.

Over in the browser when the app refreshes,

you immediately see the message logged to the console.

Lifecycle methods like component did mount are also

referred to as lifecycle hooks because they let you hook into, or

they provide hooks to certain parts of a component's lifecycle.

Because componentDidMount is immediately called after a component mounts,

it's a convenient hook for setting up timers, fetching data,

or anything else you might need to do when your component is mounted into the page.

So now, let's set up the timer inside componentDidMount

using the JavaScript set interval method.

Set interval repeatedly calls a function or

executes some code with a fixed time delay between each call.

It returns an interval ID which uniquely identifies the interval.

So let's first type this.intervalID = the setInterval method.

Then pass setInterval this.tick as the function to execute and

make the time delay 100 milliseconds or one tenth of a second.

In the tick function, I'll log the message ticking to the console for now.

So let's see where we're at with our timer.

If we have a look in the console, we see that tick is being called over and

over again.

Chrome collapses it to a single line, but

notice how the number of calls keeps increasing.

A stopwatch usually consists of a counter that's always counting up.

We may often pause it, but

any time that the counter is running it should be counting up.

We're going to store that data in state with a property called elapsedTime.

This will represent the amount of time that's passed by which we'll

initialize to 0.

Now, in order to increase the count each time tick is called, we'll need to

calculate the amount of time since the last tick and add it to the elapsedTime.

Ideally, the interval should always be 100 milliseconds from tick to tick.

However, it's not always guaranteed to be exactly 100 milliseconds.

And to learn why, check out the teacher's notes for a detailed explanation.

So instead, we should get the exact time at which the previous tick happened and

subtract the current time from that.

That will give us a more accurate interval.

Then we take that value and add it to elapsed time.

So let's implement that now.

First, in order to get the time interval between ticks,

we need to keep track of the time at which the previous tick happened.

We'll store that information and

state using a property named previousTime which we'll initialize to 0.

The handleStopwatch function starts the timer.

When the timer starts, we'll not only isRunning to true, but

also update the previous time state using Javascript's date.now method.

So below setState, I'll use an if statement

to update previous time only when starting the timer.

We'll say, if not this.state.isRunning and

I'll quickly log on my switch so the console first to test my logic.

Let's have it say starting.

Over in the browser, we see the console logs starting

only when I click the START button, good.

Now in the if statement, I'll update the previous

time state with this.setState and set it to Date.now().

Date.now() returns the exact number of milliseconds elapsed

since January 1st of 1970, or epoch time.

And it's how dates and time are stored in Javascript.

For example, if I type Date.now() into the console,

it returns a number representing milliseconds.

Each time I call it, the number increases.

This will provide a convenient way to calculate the time intervals

between clicks.

Now, nothing visually happens in our stopwatch yet, so

let's write the remaining parts of our tick function.

In the function,

we need to update the elapsed time state only if isRunning is true.

So first, let's check if isRunning is true with if (this.state.isRunning).

If true, then we'll update the timer or tick count.

We're going to use the current time stamp here to do the elapsed time calculation.

So I'll store the current time in the variable

now with const now = Date.now.

Then update state with this.setState.

And we'll update two pieces of state here, previousTime and elapsedTime.

First, we'll make sure that previousTime is updated to now, so

we can use it to calculate the elapsedTime or the time since the previous tick.

Now the elapsedTime value need to increase by an interval of time,

the amount of milliseconds that have passed since the last tick.

We can determine the elapsedTime by calculating the difference between now's

time stamp and the time stamp stored in state with now- this.state.previousTime.

Then we'll increase the elapsedTime by adding

the difference to this.state.elapsedTime.

So each time tick runs, if isRunning is true, setState is going

to update elapsedTime using the difference between previousTime and now.

And at the same time, it's going to be updating previousTime to Date.now.

This is executed over and over again as long as the timer is running.

All right, now that were done implementing the timer logic,

let's have a look at the state of the stopwatch and React DevTools.

Select the stopwatch component inside the header.

And you'll see that the elapsedTime and

previousTime states are set to 0 because the stopwatch isn't running.

As soon as I click the start button, both states begin to

update in milliseconds at about 1,000 per second which is exactly what we want.

And notice how previousTime keeps getting overwritten which is helping us keep track

of the totalElapsed time.

Finally, by now you know that it's usually a good idea to update state that depends

on a previous state by using an updated callback function.

So let's pass the setState method,

an anonymous function, with the parameter prevState.

We'll wrap the body of the function in parentheses and

replace this.state.elapsedTime with prevState.elapsedTime.

And since the handle stopwatch function also updates state based on previous

state, we'll add the callback here too.

And now we can be sure that elapsedTime and

isRunning always hold the correct updated states.

Now the stopwatch is still not displaying the time in the UI.

We'll add that in the next video.