1. We will render an element showing the time to the screen.
2. We will update the element with the help of the “setInterval()” method.
3. We will inspect the element using Chrome’s Developer Tools.

Elements

We will look at rendering elements to the DOM, and updating them. Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen. In our example, we have a React element that displays Hello, World! on the page.

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Hello, World!</h1>;
const rootNode = document.getElementById("root");

ReactDOM.render(element, rootNode);

Let’s refactor the code to put the rootNode inside ReactDOM.render().

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Hello, World!</h1>

ReactDOM.render(element, document.getElementById("root"));

React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render(). Let’s add the time to our element.

import React from "react";
import ReactDOM from "react-dom";

const element = (
  <div>    <h1>Hello, World!</h1>    <h2>It is {new Date().toLocaleTimeString()}.</h2>  </div>);

ReactDOM.render(element, document.getElementById("root"));

You will now see the current time stamp under the Hello, World! header.

Updating the Time

The time stamp is static. We want it to update every second. We will need to call ReactDOM.render() every second.

Let’s wrap our element and ReactDOM.render() inside a function, which we will call tick(). Now, we can run the tick function regularly with an interval between the runs using setInterval(), which is a method provided by the browser. The setInterval() method takes the function it will run as its first argument, followed by the interval between runs, specified in milliseconds, for its next argument. 1000 milliseconds is 1 second.

import React from "react";
import ReactDOM from "react-dom";

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);

The time now updates every second, by calling ReactDOM.render() every second. Note that in practice, most React apps only call ReactDOM.render() once. In later videos we will show you how such code gets encapsulated into stateful components.

Necessary DOM Updates Only

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. You can verify this by inspecting the rendered element with Chrome’s Developer Tools.

Open the “Inspect Elements” option. Unfold the root div by clicking on it. Unfold the div under that. Then, unfold the h2 subheader.

You can see that only the text node with the time is updating, not the other nodes. Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM. Thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.

Summary

We rendered an element showing the time to the screen. We updated the element with the help of the setInterval() method. And, we inspected the element using Chrome’s Developer Tools.

Next Up…

In the next video, we will look at React components and props.