Understanding "useEffect", Closures, and React Performance — Workout Timer Challenge

For the past 2–3 days , I worked on a small React project called Workout Timer . At first glance, the project looks simple: A timer that calculates total workout duration based on: workout type number of sets speed break length It also shows a live clock and can optionally play a click sound whenever the duration changes. But the real goal of this project wasn't building a timer. The real goal was understanding how useEffect actually works and how React performance can be improved by writing cleaner effects. Why This Project Was Interesting Many beginners (including me in the past) use useEffect for almost everything . But this project forced me to think deeper about questions like: Should this really be an effect? Is this state actually necessary? Am I creating unnecessary re-renders? Could this be calculated during render instead? Instead of just writing code, I had to analyze how React behaves internally . The First Realization: Not Everything Needs useEffect One of the first tasks