Update the Stopwatch State with componentDidMount()

All right, the first thing we'll do is create a new function called tick. 0:00 This is going to be the most essential piece of our stopwatch. 0:06 All the code that involves making the timer tick second after second will be 0:09 written here in the tick function. 0:13 In order to produce a timer that updates or ticks by the second, 0:15 the tick function will need to be called continually as long as the stopwatch 0:18 component is mounted onto the DOM or as long as it's visible on the screen. 0:21 So how we call tick over and over again? 0:26 Well, we don't wanna call it in the render method because render is for 0:28 rendering only. 0:32 Instead, we can use one of React's built in lifecycle method. 0:33 In React, every component instance follows a cycle. 0:36 It's mounted onto the DOM, it's updated with changes in data, and finally, 0:40 it's unmounted from the DOM. 0:44 This is referred to as the component lifecycle. 0:46 React provides built in lifecycle methods 0:49 that get called at each point in the lifecycle. 0:51 The lifecycle methods act as hooks you can run code at key times in your component's 0:54 life cycle. 0:59 This gives you the ability to control what happens when a component mounts, 1:00 updates and unmounts. 1:03 The lifecycle method you'll likely use most is called componentDidMount(). 1:05 So let's implement this method inside the stopwatch class. 1:09 Below the state object, write componentDidMount(). 1:12 Usually, any custom methods or functions you write need to be called somewhere 1:19 like with an event or from inside another function, for example. 1:23 The componentDidMount method gets called by React as soon as a component is 1:27 inserted or mounted into the DOM. 1:31 For instance, I'll console.log the message, 1:34 the stopwatch mounted inside component did mount. 1:36 Over in the browser when the app refreshes, 1:43 you immediately see the message logged to the console. 1:45 Lifecycle methods like component did mount are also 1:48 referred to as lifecycle hooks because they let you hook into, or 1:51 they provide hooks to certain parts of a component's lifecycle. 1:55 Because componentDidMount is immediately called after a component mounts, 1:59 it's a convenient hook for setting up timers, fetching data, 2:03 or anything else you might need to do when your component is mounted into the page. 2:06 So now, let's set up the timer inside componentDidMount 2:11 using the JavaScript set interval method. 2:14 Set interval repeatedly calls a function or 2:17 executes some code with a fixed time delay between each call. 2:20 It returns an interval ID which uniquely identifies the interval. 2:24 So let's first type this.intervalID = the setInterval method. 2:28 Then pass setInterval this.tick as the function to execute and 2:34 make the time delay 100 milliseconds or one tenth of a second. 2:40 In the tick function, I'll log the message ticking to the console for now. 2:46 So let's see where we're at with our timer. 2:54 If we have a look in the console, we see that tick is being called over and 2:56 over again. 3:01 Chrome collapses it to a single line, but 3:02 notice how the number of calls keeps increasing. 3:04 A stopwatch usually consists of a counter that's always counting up. 3:06 We may often pause it, but 3:11 any time that the counter is running it should be counting up. 3:12 We're going to store that data in state with a property called elapsedTime. 3:15 This will represent the amount of time that's passed by which we'll 3:23 initialize to 0. 3:26 Now, in order to increase the count each time tick is called, we'll need to 3:27 calculate the amount of time since the last tick and add it to the elapsedTime. 3:32 Ideally, the interval should always be 100 milliseconds from tick to tick. 3:37 However, it's not always guaranteed to be exactly 100 milliseconds. 3:41 And to learn why, check out the teacher's notes for a detailed explanation. 3:44 So instead, we should get the exact time at which the previous tick happened and 3:48 subtract the current time from that. 3:53 That will give us a more accurate interval. 3:55 Then we take that value and add it to elapsed time. 3:57 So let's implement that now. 4:01 First, in order to get the time interval between ticks, 4:02 we need to keep track of the time at which the previous tick happened. 4:05 We'll store that information and 4:09 state using a property named previousTime which we'll initialize to 0. 4:11 The handleStopwatch function starts the timer. 4:17 When the timer starts, we'll not only isRunning to true, but 4:20 also update the previous time state using Javascript's date.now method. 4:25 So below setState, I'll use an if statement 4:30 to update previous time only when starting the timer. 4:34 We'll say, if not this.state.isRunning and 4:38 I'll quickly log on my switch so the console first to test my logic. 4:43 Let's have it say starting. 4:48 Over in the browser, we see the console logs starting 4:52 only when I click the START button, good. 4:57 Now in the if statement, I'll update the previous 5:01 time state with this.setState and set it to Date.now(). 5:07 Date.now() returns the exact number of milliseconds elapsed 5:14 since January 1st of 1970, or epoch time. 5:19 And it's how dates and time are stored in Javascript. 5:22 For example, if I type Date.now() into the console, 5:24 it returns a number representing milliseconds. 5:28 Each time I call it, the number increases. 5:31 This will provide a convenient way to calculate the time intervals 5:33 between clicks. 5:36 Now, nothing visually happens in our stopwatch yet, so 5:37 let's write the remaining parts of our tick function. 5:41 In the function, 5:43 we need to update the elapsed time state only if isRunning is true. 5:44 So first, let's check if isRunning is true with if (this.state.isRunning). 5:49 If true, then we'll update the timer or tick count. 5:58 We're going to use the current time stamp here to do the elapsed time calculation. 6:01 So I'll store the current time in the variable 6:05 now with const now = Date.now. 6:11 Then update state with this.setState. 6:16 And we'll update two pieces of state here, previousTime and elapsedTime. 6:22 First, we'll make sure that previousTime is updated to now, so 6:29 we can use it to calculate the elapsedTime or the time since the previous tick. 6:33 Now the elapsedTime value need to increase by an interval of time, 6:37 the amount of milliseconds that have passed since the last tick. 6:41 We can determine the elapsedTime by calculating the difference between now's 6:45 time stamp and the time stamp stored in state with now- this.state.previousTime. 6:51 Then we'll increase the elapsedTime by adding 6:57 the difference to this.state.elapsedTime. 7:02 So each time tick runs, if isRunning is true, setState is going 7:07 to update elapsedTime using the difference between previousTime and now. 7:12 And at the same time, it's going to be updating previousTime to Date.now. 7:19 This is executed over and over again as long as the timer is running. 7:25 All right, now that were done implementing the timer logic, 7:28 let's have a look at the state of the stopwatch and React DevTools. 7:31 Select the stopwatch component inside the header. 7:34 And you'll see that the elapsedTime and 7:37 previousTime states are set to 0 because the stopwatch isn't running. 7:39 As soon as I click the start button, both states begin to 7:43 update in milliseconds at about 1,000 per second which is exactly what we want. 7:46 And notice how previousTime keeps getting overwritten which is helping us keep track 7:50 of the totalElapsed time. 7:55 Finally, by now you know that it's usually a good idea to update state that depends 7:57 on a previous state by using an updated callback function. 8:01 So let's pass the setState method, 8:05 an anonymous function, with the parameter prevState. 8:08 We'll wrap the body of the function in parentheses and 8:12 replace this.state.elapsedTime with prevState.elapsedTime. 8:18 And since the handle stopwatch function also updates state based on previous 8:25 state, we'll add the callback here too. 8:30 And now we can be sure that elapsedTime and 8:38 isRunning always hold the correct updated states. 8:40 Now the stopwatch is still not displaying the time in the UI. 8:44 We'll add that in the next video. 8:47