How aleksei-nika/reactstopwatch works
This is a small React stopwatch app. The user-facing flow is to open the app, start or resume elapsed-time measurement, stop or reset it, and optionally record lap points shown as cumulative and split times. The runtime uses refs for timer state and direct display updates, and React state for lap rendering. The README also describes an earlier basic version; the sampled source implements the more precise Date.now()-based version. Styling is present but omitted from the runtime graph.
Main entry points: Stopwatch.jsx Timer controls · App.jsx App shell · main.jsx React mount
Components 11
App entry
- React mount
src/main.jsx - App shell
src/App.jsx
Stopwatch runtime
- Stopwatch UI
src/Stopwatch.jsx - Timer controls
src/Stopwatch.jsx - Timer refs
src/Stopwatch.jsx - Elapsed display
src/Stopwatch.jsx - Time formatter
src/Stopwatch.jsx
Other components
- User
- Browser APIs
Connections 10
- React mount → App shell: renders
- App shell → Stopwatch UI: renders
- User → Timer controls: clicks
- Timer controls → Timer refs: updates
- Timer controls → Browser APIs: starts / clears
- Browser APIs → Elapsed display: ticks
- Elapsed display → Time formatter: formats
- Timer controls → Lap state: records laps
- Lap state → Lap list: renders
- Lap list → Time formatter: formats times