function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

In the example mentioned above the previous element is not deleted and a new element is rendered. How'd it know that instead of creating a new element I want to replace it?

CodePudding user response：

ReactDOM.render will replace the inner html of element that you passed in the component, everytime the interval ticks.

CodePudding user response：

so there is to main topics here: mutable and immutable, to strip that down you can imagine that:

let str1 = ‘abc’
let str2 = ‘abc’

str1 === str2 would be true but

let str1 = new String(‘abc’)
let str2 = new String(‘abc’)

str1 === str2 would be false

So what is concept here you want to ask?

So basically when you do let someVar you create immutable object witch is referenced somewhere in your mem, so then if that object changed during runtime you have check its original state with the value it holding right now…

Here is where immutable concept comes in to scope, basically you don’t keep the original object, every time you modify something you create new object (what’s in modern called record) so if you modify something the object is new same comes for state…

Applying that to react, when you do

const [state, setState] = useState();

So every time to dosetState(newSrate) React create new object from that so ui know that this object should be updated…

Hope it makes some sense, and it mostly true ;) but at list that simplest explanation i see how that works…

Cheers..

Concerning your question, everything inside component would rerender in every frame