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().


Example

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


function tick() {
  const element = (
    <div>
      <h1>The time is {new Date().toLocaleTimeString()}.</h1>
    </div>
  );
  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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
@use rule in SCSS (Sass)SCSSHow Routing works in Angular?AngularPHP Login System using PDO Part 1: Create User Registration PagePHPHow to Make CSS Lists Bullets Smaller?CSSSQL Right JoinSQL/MySQLHow to catch .keypress() on body using jQuery?jQuery