Why build a stopwatch with React?
What is the importance of time apps?
Bottom line: The stopwatch is a great way to learn some basic React skills.
Time measurement is used in the following situations:
- Exercise record (running timer, etc.)
- Study time management (Pomodoro method, etc.)
- Measuring work hours at factories and workplaces
- Limiting children's gaming and playtime
Such "time measuring functions" areIt is widely used not only in web applications but also in the real world.
By creating a stopwatch with React,Screen state management, time control, and side effectsMany other skills will be acquired.
How to use useRef and useEffect
Why do we need useRef?
Bottom line: Use it to persist values while avoiding screen redraws.
With normal state management (useState), the screen is updated every time the value changes.
But with a stopwatch,Updating the state every second would be expensive.
Therefore, we use useRef to record the time and timer ID as "values that are not redrawn but are retained."
Where to use useEffect?
Bottom line: Use it to adjust the timing of initialization, cleanup, etc.
useEffect is suitable for the following:
- Execute the process once when the app starts
- Stop the timer when the component is destroyed
- Switching events according to button presses
Like a stopwatchFunctions closely related to timeNow, how you use useEffect is very important.
Create a stopwatch display using React
Consider the screen and button configuration
Conclusion: Simply have "time" and "three buttons".
Here is the basic configuration:
- Display of elapsed time (00:00:00)
- Start button
- Stop button
- Reset button
1 2 3 4 5 6 7 8 9 |
); }
|
Implementing start/stop/reset functions
Expressing actual movement with React
Conclusion: You can easily achieve this by advancing the time with setInterval and managing it with useRef.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
);
)
;
}, 1000); };
; };
};
}, []); (
); } |
Application functions and improvements
How to make a better stopwatch?
Conclusion: It would be more useful with the following additional features:
- Pause and resume functionality
- Lap time (interval time) recording
- Improve the appearance with CSS
- Maximum time and alarm settings
To learn how to handle time and side effectsJust the right subjectA stopwatch is highly recommended.
Completed code list
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
;
);
)
;
}, 1000); };
; };
};
}, []); (
); }
'0' );
'0' );
'0' );
}
|
summary
ReactuseRef
anduseEffect
UsingHow to Build a Stopwatch App from ScratchI have learned the following.
As a recap:
- useRefA tool that retains values without redrawing
- useEffectA means of managing the start and end timing of processing
- With React,Anyone can make a professional stopwatch
Please try out the code yourself.Get familiar with how React handles time and state.
Related links: