Can we call root.render() inside setInterval()?

Sai Tanmayee Chervi — Tue, 10 May 2022 13:57:20 +0000

Why doesn't the below code work?

const root = ReactDOM.createRoot(document.getElementById('root'));

function Clock() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
   );
}

setInterval( root.render(<Clock />), 1000);

But why does wrapping the root.render() in a tick method like below work?

const root = ReactDOM.createRoot(document.getElementById('root'));

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  root.render(<Clock date={new Date()} />);
}

setInterval(tick, 1000);

Forgive me! I'm a beginner :)

DEV Community: Sai Tanmayee Chervi

Can we call root.render() inside setInterval()?