Today I would like to show you my example of creating a timer.⏱️
This is what the component looks like (in storybook) :
Usage: timer as a functional component using react-hooks,
Expectations: displays the elapsed time while taking the quiz and displays the total time in the last step that is the result of the quiz
I create an arrow function called Timer and pass 3 arguments to it:
isActiveis a boolean variable that provides information as to whether the Timer is on (if
isActiveis true, the clock is running)
secondsis a variable of the type
numberthat represents the value of the clock counter. The value that initializes this variable is 0 because this timer will begin counting from 0
setSecondsis a function that modifies state which is contained in another component, it expects that passed function to behave like the function returned by hook
The body of the Timer function contains:
- useEffect in which:
setIntervalwill run, which increases the variable seconds by one every 1000 milliseconds - that is every 1 second
setSeconds(prevSeconds => prevSeconds + 1)means that the previous value is increased by one (0 + 1 = 1, 1 + 1 = 2, 2 + 1 = 3, 3 +1 = 4 ... etc)
I'll pause here to explain why we're using the useEffect Hook.
When looking for information about
useEffect, you can often encounter the following content: "The Effect Hook lets you perform side effects in function components.". Personally, that doesn't tell me much. So I will share how I understand it.
useEffect is like a combination of
componentWillUnmount. It is related to the component lifecycle because it starts only when the component is mounted and exits when the component has been unmounted on the page.
In addition, we use
useEffect for components whose functionality does not depend on the direct user interaction of the interface. Our sample clock will update itself while active with the passage of time, it does not depend on the interaction of the user using the website, it is not possible to click on it and change it.
Another feature of using
useEffect is that in addition to starting a timer, it will also handle a timer clean up, which should always happen before the component is unmounted.
The operation of
useEffect and its updating can be made dependent on some other data using the dependency table. In this case, in the dependency array, I have put:
setSeconds. The dependency on
isActive is that when
isActive changes to false, the clock should stop counting. The change will run again
useEffect which on the second execution will start with the
clearInterval cleaning function, then in the function body the
if(isActive) condition will be checked again and the function will exit.
The second dependency
setSeconds is making sure, that
useEffect will always use the current version of this function.
For people who like diagrams😊- I have prepared my own diagram showing useEffect flow:
- Finally, Timer returns the Typography component (from the MUI library), which displays the elapsed time.
I display the elapsed time in hh:mm:ss format and use the
formatSeconds function to get seconds into that format.
Finally, you can display a working Timer wherever you want on the page💁
Top comments (0)