Counter & Timer App

Counter logic looks simple, but it can still introduce state bugs. A common mistake is updating the counter using the current value from the render instead of the latest state. This becomes visible when users click quickly, when the step value changes, or when several actions happen close together. React state updates may be batched, so relying on an old count value can produce incorrect results.

Problematic approach:

          function Counter() {
            const [count, setCount] = useState(0);
            const [step, setStep] = useState(1);

            function increment() {
              setCount(count + step);
            }

            function decrement() {
              setCount(count - step);
            }

            return (
              <>
                <button onClick={decrement}>-</button>
                <span>{count}</span>
                <button onClick={increment}>+</button>
              </>
            );
          }

This version often works during slow manual testing, but it is less reliable during rapid clicks because count may not represent the newest state at the moment the update is applied.

Better approach:

          function Counter() {
            const [count, setCount] = useState(0);
            const [step, setStep] = useState(1);

            function increment() {
              setCount((currentCount) => currentCount + step);
            }

            function decrement() {
              setCount((currentCount) => currentCount - step);
            }

            function reset() {
              setCount(0);
            }

            return (
              <>
                <button onClick={decrement}>-</button>
                <span>{count}</span>
                <button onClick={increment}>+</button>
                <button onClick={reset}>Reset</button>
              </>
            );
          }

Step input validation:

          function updateStep(event) {
            const nextStep = Number(event.target.value);

            if (Number.isNaN(nextStep) || nextStep < 1) {
              setStep(1);
              return;
            }

            setStep(nextStep);
          }

Pay attention to: Use functional state updates for counter actions. This keeps the counter correct during rapid clicks and makes the logic safer when the app grows.

Timer bugs often happen because the app creates a new interval every time the user clicks Start. If the Start button remains clickable while the timer is already running, the app may create two, three, or more intervals. The timer then appears to speed up, pause incorrectly, or continue running after reset.

Problematic code:

          function Stopwatch() {
            const [seconds, setSeconds] = useState(0);

            function start() {
              setInterval(() => {
                setSeconds((value) => value + 1);
              }, 1000);
            }

            return (
              <button onClick={start}>
                Start
              </button>
            );
          }

This code never stores the interval ID and never clears the interval. Every Start click creates another running timer.

Better approach:

          function Stopwatch() {
            const [seconds, setSeconds] = useState(0);
            const [status, setStatus] = useState("stopped");
            const intervalRef = useRef(null);

            useEffect(() => {
              if (status !== "running") {
                return;
              }

              intervalRef.current = setInterval(() => {
                setSeconds((value) => value + 1);
              }, 1000);

              return () => {
                clearInterval(intervalRef.current);
              };
            }, [status]);

            function start() {
              setStatus("running");
            }

            function pause() {
              setStatus("paused");
            }

            function reset() {
              clearInterval(intervalRef.current);
              setSeconds(0);
              setStatus("stopped");
            }

            return (
              <>
                <button disabled={status === "running"} onClick={start}>
                  Start
                </button>

                <button disabled={status !== "running"} onClick={pause}>
                  Pause
                </button>

                <button onClick={reset}>
                  Reset
                </button>
              </>
            );
          }

Pay attention to: Timer intervals need lifecycle control. Start the interval only when the timer is running, clean it up when status changes, and disable buttons that would create conflicting states.

Countdown timers need a clear completion rule. Beginners often subtract one second forever and only change the UI text when the value becomes negative. This creates awkward states like -1, -2, or a timer that visually says completed but still runs in the background.

Problematic approach:

          useEffect(() => {
            if (!isRunning) return;

            const intervalId = setInterval(() => {
              setRemainingSeconds((seconds) => seconds - 1);
            }, 1000);

            return () => clearInterval(intervalId);
          }, [isRunning]);

This interval never checks whether the countdown has reached zero. The state keeps decreasing unless another part of the app stops it.

Better approach:

          useEffect(() => {
            if (status !== "running") {
              return;
            }

            const intervalId = setInterval(() => {
              setRemainingSeconds((seconds) => {
                if (seconds <= 1) {
                  clearInterval(intervalId);
                  setStatus("completed");
                  return 0;
                }

                return seconds - 1;
              });
            }, 1000);

            return () => clearInterval(intervalId);
          }, [status]);

Safer completion UI:

          const timerMessage = useMemo(() => {
            if (status === "completed") {
              return "Time is up!";
            }

            if (status === "paused") {
              return "Timer paused";
            }

            if (status === "running") {
              return "Timer running";
            }

            return "Timer ready";
          }, [status]);

Pay attention to: Clamp countdown values at zero and stop the timer immediately when it completes. A countdown should have explicit states such as ready, running, paused, and completed.

Since stopwatch and countdown both use seconds, it is tempting to control both modes with the same variables. This can quickly create bugs: the stopwatch starts from the countdown duration, the countdown resumes from stopwatch time, or reset clears one mode but not the other. Even in a beginner app, separate responsibilities make the logic easier to understand.

Problematic state:

          const [seconds, setSeconds] = useState(0);
          const [isRunning, setIsRunning] = useState(false);
          const [mode, setMode] = useState("stopwatch");

          function reset() {
            setSeconds(0);
            setIsRunning(false);
          }

This may work at first, but seconds means different things depending on the mode. In stopwatch mode it means elapsed time. In countdown mode it means remaining time.

Better structure:

          const [activeTool, setActiveTool] = useState("stopwatch");

          const [stopwatch, setStopwatch] = useState({
            elapsedSeconds: 0,
            status: "stopped"
          });

          const [countdown, setCountdown] = useState({
            initialSeconds: 300,
            remainingSeconds: 300,
            status: "ready"
          });

Separate reset actions:

          function resetStopwatch() {
            setStopwatch({
              elapsedSeconds: 0,
              status: "stopped"
            });
          }

          function resetCountdown() {
            setCountdown((current) => ({
              ...current,
              remainingSeconds: current.initialSeconds,
              status: "ready"
            }));
          }

Pay attention to: Stopwatch and countdown are related UI tools, but they should not share every piece of state. Keep each mode independent and use a parent component only to switch which tool is visible.

A timer that displays 3671 technically works, but it is not user-friendly. Timers should be easy to scan. A common mistake is rendering raw seconds everywhere and postponing formatting until the end. It is better to create one formatting helper early and use it consistently across stopwatch and countdown modes.

Problematic rendering:

          <Text fontSize="4xl">
            {seconds}
          </Text>

Raw seconds are hard to read after the timer passes one minute. Users expect timer formats such as 05:00 or 01:01:11.

Better approach:

          function formatTime(totalSeconds) {
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = totalSeconds % 60;

            const paddedMinutes = String(minutes).padStart(2, "0");
            const paddedSeconds = String(seconds).padStart(2, "0");

            if (hours > 0) {
              return `${hours}:${paddedMinutes}:${paddedSeconds}`;
            }

            return `${paddedMinutes}:${paddedSeconds}`;
          }

Chakra UI display example:

          <Text
            as="output"
            fontSize="5xl"
            fontWeight="bold"
            aria-live="polite"
          >
            {formatTime(remainingSeconds)}
          </Text>

Duration input guard:

          function updateCountdownMinutes(value) {
            const minutes = Number(value);

            if (Number.isNaN(minutes) || minutes < 1) {
              setCountdown((current) => ({
                ...current,
                initialSeconds: 60,
                remainingSeconds: 60
              }));
              return;
            }

            setCountdown((current) => ({
              ...current,
              initialSeconds: minutes * 60,
              remainingSeconds: minutes * 60
            }));
          }

Pay attention to: Format time consistently and validate duration inputs. A small app becomes much more polished when users can immediately understand what they are seeing.