How to use setInterval() in react?-CodePudding

I'm trying to learn react and I am trying to create a working clock

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends React.Component {
  render() {
    function tick() {
      return new Date().toLocaleTimeString();
    }
    return <h1>{tick()}</h1>; 
    //I want to use setInterval(tick, 1000) here so I can call the tick function every 1 sec
  }
}
export default App;

Thanks in advance

CodePudding user response：

You should use setInterval in a useEffect and don't forget to return the clear interval from the useEffect so that it gets removed on unmount:

useEffect(() => {
  const interval = setInterval(() => {
    console.log('This will run every second!');
  }, 1000);
  return () => clearInterval(interval);
}, []);

CodePudding user response：

Add this code :D

useEffect(() => {
    const timer = setInterval(tick, 1000);
    return () => clearInterval(timer)
}, [])