Getting problem in making a timer/ count-down code in ReactJs

Question

I am getting a problem in making a countdown timer which will start on clicking on start button and it will stop onClicking on the stop button. I have made that thing on javascript but when I came to reactJs, I am getting unable. I am providing all the codes. And please check what is the problem.

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [data, setData] = useState(0);
  let interval;
  return (
    <>
      <div id="Message"> {data} </div>
      <button
        onClick={() => {
          interval = setInterval(() => {
            setData(data + 1);
          }, 1000);
        }}
      >
        Start
      </button>
      <button
        onClick={() => {
          clearInterval(interval);
        }}
      >
        End
      </button>
    </>
  );
};
export default App;

Drew Reese · Accepted Answer · 2021-01-26 09:08:01Z

1

Issues

The timer/interval reference is redeclared each render cycle, so you can never clear it once anything causes the component to rerender.
You've a stale enclosure of the data state value in the interval callback.

Solution

Use a React ref to hold the interval reference.
Use a functional state update to correctly update the data counter.

Code

const App = () => {
  const [data, setData] = useState(0);
  const intervalRef = useRef();

  return (
    <>
      <div id="Message"> {data} </div>
      <button
        onClick={() => {
          intervalRef.current = setInterval(() => {
            setData(c => c + 1);
          }, 1000);
        }}
      >
        Start
      </button>
      <button
        onClick={() => {
          clearInterval(intervalRef.current);
        }}
      >
        End
      </button>
    </>
  );
};

Demo

answered Jan 26, 2021 at 9:08

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jurshsmith · Accepted Answer · 2021-01-26 08:47:46Z

Try this out. Basically using State to keep track of the intervals too.

import React, { useState } from "react";
import "./style.css";

function App() {
  const [data, setData] = useState(0);
  const [intervalInstance, setIntervalInstance] = useState(null);
  return (
    <>
      <div id="Message"> {data} </div>
      <button
        onClick={() => {
          const interval = setInterval(() => {
            setData(prevData => prevData + 1);
          }, 1000);
          setIntervalInstance(interval);
        }}
      >
        Start
      </button>
      <button
        onClick={() => {
          clearInterval(intervalInstance);
        }}
      >
        End
      </button>
    </>
  );
}
export default App;

Collectives™ on Stack Overflow

Getting problem in making a timer/ count-down code in ReactJs

2 Answers 2

Issues

Solution

Demo

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Issues

Solution

Demo

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related