Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

349
Visualizações
How can I get useEffect to work inside of my function?

Currently, I am trying to build a timer, but it stops after one second. I am trying to use hooks in React and I am trying to figure out how to implement useEffect into my startTimer function so it can countdown.

function InputTimer() {
  const [timerOn, setTimerOn] = useState(false);
  const [timerStart, setTimerStart] = useState(0);
  const [timerTime, setTimerTime] = useState(0);

  let timer;

  const startTimer = () => {
    setTimerOn(true);
    setTimerStart(0);
    setTimerTime(0);

    timer = setInterval(() => {
      const newTime = timerTime - 1;

      if (newTime >= 0) {
        setTimerTime(newTime);
      } else {
        clearInterval(timer);
        setTimerOn(false);
        alert("Countdown Ended");
      }
    }, 1000);
  }
}
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

It appears your code is working.

However, you just set the time to be zero, so after a second, it exits.

To properly test, your code, set the start time to 10 seconds: setTimerTime(10);

Full Code

function InputTimer() {
  const [timerOn, setTimerOn] = useState(false);
  const [timerStart, setTimerStart] = useState(0);
  const [timerTime, setTimerTime] = useState(0);

  let timer;

  const startTimer = () => {
    setTimerOn(true);
    setTimerStart(10); // Change this line
    setTimerTime(0);

    timer = setInterval(() => {
      const newTime = timerTime - 1;

      if (newTime >= 0) {
        setTimerTime(newTime);
      } else {
        clearInterval(timer);
        setTimerOn(false);
        alert("Countdown Ended");
      }
    }, 1000);
  }
}
about 4 years ago · Juan Pablo Isaza Relatório

0

You've closed over the timerTime value in the interval callback scope, it never changes.

Here's a minimal example of your logic that runs:

Split the logic up, use the interval callback to decrement the time and use a useEffect hook to check the termination condition. Use a React ref to store the timer reference.

function InputTimer() {
  const [timerTime, setTimerTime] = useState(10);

  const timerRef = useRef();

  useEffect(() => {
    return () => clearInterval(timerRef.current);
  }, []);

  useEffect(() => {
    if (timerTime <= 0) {
      clearInterval(timerRef.current);
      alert("Countdown Ended");
    }
  }, [timerTime]);

  const startTimer = () => {
    setTimerTime(10);

    timerRef.current = setInterval(() => {
      setTimerTime(time => time - 1);
    }, 1000);
  }

  return (
    <>
      <div>Time: {timerTime}</div>
      <button type="button" onClick={startTimer}>Start</button>
    </>
  )
}

Edit how-can-i-get-useeffect-to-work-inside-of-my-function

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda