25 + 5 Clock - React Hooks - Audio starts playing late and other lagging responses

JavaScript
1

Hi there

I have two very similar solutions for the pomodoro timer.
One is passing all tests (with a single React component) and the other one not (with two React components).

I am using hooks and I found quite odd behaviour with some lagging responses.

I started with two React components: Clock and Session.

  1. Audio triggering late

With the help of a custom useInterval hook, when time reaches zero I try to trigger the audio, but for some reason it’s triggered quite late after two seconds.

The solution I came up with is quite ugly:

  React.useEffect(()=>{
    currentTime = new Date().getTime();
    diff = (currentTime - countDown)/1000;
    if (secondsLeft=="00" && minutesLeft=="00" & (refTimeLeft-diff)<10) {
      document.getElementById('beep').play();
    }
  });

This solution is not so good in my sense because this useEffect runs at every render, which I don’t really need.
Also you may notice this odd comparison (refTimeLeft-diff)<10, it’s because when minutesLeft changes from 01 to 00 secondsLeft may still be 00 before changing to 59, so the audio may be triggered at 01:00 because of the order of the instructions (you may not see with your eyes that actually the timer changes from 01:00 to 00:00 before changing to 00:59).

  1. Failing on User Story #11 (with two React components)
    Apparently this code executes a bit too late for the grader.
React.useEffect(()=>{
    if (props.isReset)
      {
        setRefTimeLeft(25*60);
        setMinutesLeft("25");
        setSecondsLeft("00");
        setLabel("Session");
        document.getElementById("beep").load();
      }
  }, [props.isReset]);

With a single React component I don’t need this useEffect as all states are present in the same component.

  const handleReset = () => {
    setBreakLength(5);
    setSessionLength(25);
    setRunning(false);
    setReset(true);
    setRefTimeLeft(25*60);
    setMinutesLeft("25");
    setSecondsLeft("00");
    setLabel("Session");
    isSession = true;
    document.getElementById('beep').load();
  }

Links to my pens:

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.