A timer schedules repeated work at a time interval. In a React component, an effect can start an interval, update state on each tick, and return cleanup that stops it. section 6.1.2 section 6.1.5
A reliable component timer follows these patterns:
- Start the interval inside an effect and update the countdown with a state updater. section 6.1.2
- Return clearInterval cleanup so unmounting or changing timer state does not leave the interval running. section 6.1.5
- Use an effect dependency such as isRunning when the interval should start and stop without unmounting the component. section 6.1.5
- Treat setInterval as approximate; use performance.now() when the countdown requires greater precision. section 12.2.1
A stopwatch component
useEffect(() => {\n const interval = setInterval(\n () => setSeconds((seconds) => seconds + 1),\n 1000\n );\n return () => clearInterval(interval);\n}, []);
