MENU


Components and Props

React elements are immutable. Once you create an element, outside outside outside the element,you cannot changeits children or attributes. The only way to update the UI without relying on the internal re-renders of the React component is to create a new component and pass it to ReactDOM.render().

After you have rendered a component, any changes in its internal 'state's will cause re-renders and be automatically reflected in the DOM.

React only updates what is necessary. React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. As you can see below, only the time text node is highlighted on the Developer Tools Interface (F12).
RESETRUNFULL
<!DOCTYPE html><html><head></head><body><script src="https://unpkg.com/react@17/umd/react.development.js"
            crossorigin></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
            crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">function tick() {
  const element = (<div>
  <h1>Hello, world!</h1>
  <h2>It is {new Date().toLocaleTimeString()}.</h2></div>
  );
  ReactDOM.render(element, document.querySelector('body'));}setInterval(tick, 1000);
    </script></body></html>