setTimout with pause/resume counter not updating on render

Question

I would like to setup a counter which can be paused as well as resumed in React.js. But whatever I have tried so far is working the functionality part (pause/resume is working) but it's not updating the counter on render. Below is my code:

const ProgressBar = (props) => {
  const [isPlay, setisPlay] = useState(false);
  const [progressText, setProgressText] = useState(
    props.duration ? props.duration : 20
  );
  var elapsed,
    secondsLeft = 20;

  const timer = () => {
    // setInterval for every second
    var countdown = setInterval(() => {
      // if allowed time is used up, clear interval
      if (secondsLeft < 0) {
        clearInterval(countdown);
        return;
      }
      // if paused, record elapsed time and return
      if (isPlay === true) {
        elapsed = secondsLeft;
        return;
      }
      // decrement seconds left
      secondsLeft--;
      console.warn(secondsLeft);
    }, 1000);
  };
  timer();

  const stopProgress = () => {
    setisPlay(!isPlay);
    if (isPlay === false) {
      secondsLeft = elapsed;
    }
  };

  return (
    <>
      <p>{secondsLeft}</p>
    </>
  );
};

export default ProgressBar;

I have tried React.js state, global var type, global let type, react ref so far to make the variable global but none of them worked..

You're going to have to share more of your component code for us to help you then. — Dominik, Apr 22 '21 at 22:04
and you should be using hooks. like `useState` and `useEffect` — onlit, Apr 22 '21 at 22:06
Does this answer your question? [React hooks - right way to clear timeouts and intervals](https://stackoverflow.com/questions/53090432/react-hooks-right-way-to-clear-timeouts-and-intervals) — Dominik, Apr 22 '21 at 22:15
Also have a read here: https://overreacted.io/making-setinterval-declarative-with-react-hooks/ — Dominik, Apr 22 '21 at 22:17
@ThomasJames were you able to check my answer, does it work for you? I have tried to describe also how rerendering happens — Dmytro Krasnikov, Apr 27 '21 at 06:06

score 1 · Accepted Answer · answered Apr 22 '21 at 22:26

So basically why does your example not work? Your secondsLeft variable not connected to your JSX. So each time your component rerendered it creates a new secondsLeft variable with a value of 20 (Because rerendering is simply the execution of your function that returns JSX) How to make your variable values persist - useState or useReducer hook for react functional component or state for class based one. So react will store all the values for you for the next rerender cycle. Second issue is React doesn't rerender your component, it just doesn't know when it should. So what causes rerendering of your component -

Props change
State change
Context change
adding/removing your component from the DOM
Maybe I missing some other cases

So example below works fine for me

import { useEffect, useState } from "react";

function App() {
  const [pause, setPause] = useState(false);
  const [secondsLeft, setSecondsLeft] = useState(20);

  const timer = () => {
    var countdown = setInterval(() => {
      if (secondsLeft <= 0) {
        clearInterval(countdown);
        return;
      }

      if (pause === true) {
        clearInterval(countdown);
        return;
      }

      setSecondsLeft((sec) => sec - 1);
    }, 1000);
    return () => {
      clearInterval(countdown);
    };
  };
  useEffect(timer, [secondsLeft, pause]);

  const pauseTimer = () => {
    setPause((pause) => !pause);
  };

  return (
    <div>
      <span>Seconds Left</span>
      <p>{secondsLeft}</p>
      <button onClick={pauseTimer}>{pause ? "Start" : "Pause"}</button>
    </div>
  );
}

it worked perfectly. thanks for ur time, much appreciated :) — Thomas James, Apr 28 '21 at 08:11

ghkatende · Answer 2 · 2021-04-22T22:44:17.017

import React, { useState, useEffect } from "react";

import logo from "./logo.svg";
import "./App.css";
var timer = null;
function App() {
  const [counter, setCounter] = useState(0);
  const [isplayin, setIsPlaying] = useState(false);

  const pause = () => {
    setIsPlaying(false);
    clearInterval(timer);
  };

  const reset = () => {
    setIsPlaying(false);
    setCounter(0);
    clearInterval(timer);
  };

  const play = () => {
    setIsPlaying(true);
    timer = setInterval(() => {
      setCounter((prev) => prev + 1);
    }, 1000);
  };
  return (
    <div className="App">
      <p>Counter</p>
      <h1>{counter}</h1>
      {isplayin ? (
        <>
          <button onClick={() => pause()}>Pause</button>
          <button onClick={() => reset()}>Reset</button>
        </>
      ) : (
        <>
          {counter > 0 ? (
            <>
              <button onClick={() => play()}>Resume</button>
              <button onClick={() => reset()}>Reset</button>
            </>
          ) : (
            <button onClick={() => play()}>Start</button>
          )}
        </>
      )}
    </div>
  );
}

export default App;

setTimout with pause/resume counter not updating on render

2 Answers2