The clearInterval() function doesn't clear Interval In React

Question

Im doing this:

startinterval = () => {
    this.interval = setInterval(this.intervalFunction, 10000)
}


clearInterval = () => {
    clearInterval(this.interval)
}

but when i call the clearInterval function it doesn't do anything and the interval continues

Answer 1

If you are using functional components you can use:

function MyComponent() {
  const [intervalId, setIntervalId] = useState();

  useEffect(() => {
    let id = setInterval(() => {
      //Code to do
    }, 10000);
    setIntervalId(id);

    return () => {
      clearInterval(intervalId);
    };
  });

  return <div>UI Here</div>;
}

If you are using a class as component:

class MyComponent {
    intervalId;

  componentDidMount() {
    this.intervalId = setInterval(() => {
        //Code to do here or call another function
    }, 10000);
  }

  componentWillUnmount() {
      clearInterval(this.intervalId);
  }
}

The best important to take in advance is that you need store the id for clear the timeout. If you lost the correct id the clear function won't work correctly.