GoProReact

Counter Timer

Instructions

This component illustrates the importance of cleanup functions in React'suseEffect.
When you start the timer, both counters will begin updating every second.

  • Count (No Cleanup): Updates without clearing previous intervals. You will notice that the count never stops even after hitting the stop button.
    Also, the more you toggle the start/stop button the count starts to incement faster than the other counter.
  • Count (With Cleanup): Properly clears the interval each time, ensuring only one interval is running.
Toggle the timer a few times and observe how the count values diverge due to the missing cleanup in one effect.

0
0

Timer status: Stopped

Press "Start Timer" to begin the demonstration