useEffect to set timer
Solidify your knowledge of Component Lifecycle Phases by solving this problem.
Dogendar 🐶 is special and so is his stopwatch. Instead of counting time every one second, his stopwatch count time every 3 seconds so it goes like 0 (initially), 1 (after 3 seconds), 2 (after another 3 seconds) and so on. He decides to write a React component SpecialStopwatch
that mimics his special stopwatch. Dogendar knows that he can perform things in continuous intervals using setInterval
function of JavaScript.
The component takes two props currentTime
and incrementTime
. currentTime
is the current time in stopwatch and incrementTime
is a function that can be used to increment the time in stopwatch by 1. It is implemented as
const incrementTime = () => { currentTime = currentTime + 1 }
Help Dogendar finish the component and fulfil these requirements:
- Show current time in the exact format
Stopwatch: {currentTime}
(case-sensitive) - Call
incrementTime
function every 3 seconds to update the time
Keep in mind that since currentTime
is a prop, the component will rerender everytime you update time using incrementTime
and latest currentTime
will be passed as prop.