Yogesh Chauhan's Blog

Rendering Elements in React

in React on April 22, 2021

As I mentioned in the React Basics post and the JSX React post, React divided the app in smaller components that are reusable too.

React components are made of elements.

In JSX React post, I demonstrated how to create smaller elements and render them.

We also saw that react elements are more like objects. ReactDOM keeps checking the objects props and keep updating the DOM constantly for us.

Element object can be any type of HTML element

const element = <h1>Hello, world</h1>;
const element2 = <p>Hello, world</p>;
const element3 = <img src={user.imageUrl} />;

How to render an element into the DOM?

If you followed all the steps from React Basics post and the JSX React post then you must have noticed that we are rendering the data into the DOM using the element with the ID “root“.

In previous examples, you must have noticed this line:

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

Using ReactDOM.render() we can render a React element into a root DOM node.

That root element you can see inside your projects folder’s public directory. Go to /public/index.html and you’ll see the div element like this:

<div id="root"></div>

If you’re using only React for your project then you might just have one root element but if you use React with other applications then you might have more than one root DOM nodes.

How does React updates the rendered element?

Elements created in React are immutable — meaning once they are created, you can’t change its children or attributes.

Weird. Isn’t it? I mean you’d want to change the elements based on clicks or some events on the front end side.

There is a way. Render the element again! Yes. Right now that’s the only way to do so (In future posts, I will demonstrate other ways like element’s states change).

To update the element, you need to create the same element with new attributes and render it again by passing it to ReactDOM.render().


Try to add this code to your /src/index.js file:

function tick() {
  const element = (
      <h1>The time is {new Date().toLocaleTimeString()}.</h1>
  ReactDOM.render(element, document.getElementById('root'));

setInterval(tick, 1000);

The setInterval method calls the tick function every second. The tick function creates the element as well as renders it using ReactDOM.render().

React keeps states of the element and compares the current state to the previous state of the element and if there was a change it applies those changes to the DOM. It’s like live Git versioning except that it’s not!

You’ll see the output as well as rendering of the output like this in your browser window if you inspect the element.

So, even though the whole element gets created on each function call, React checks for that specific part of the element and updates it! Which is pretty damn good considering there is no span or other divider element in between the h1 tags.

States in Reacts are very powerful!

Source: React Docs

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
CREATE DATABASE in PostgreSQLPostgresOptional arguments, Default parameters and REST parameters in JavaScriptJavaScriptCSS Attribute SelectorsCSSHow to create a simple text and image slider using CSS and JavaScript?CSSCheck if any column has NULL values in PostgresPostgresHow to Recognize an Array in JavaScript?JavaScript