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

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;

Answer

Issues

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

Solution

1. Use a React ref to hold the interval reference.
2. 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