How to Render and Update React Elements

In React app, elements are the smallest building blocks. Components are made up of React elements. These elements are plain objects and very cheap to create. React DOM takes care of updating DOM by using these React elements.

How to Render and Update React Elements



Rendering React Element Into DOM

Let’s say you have normal HTML div and you want to render React Element into it.

Let’s create React Element,

In the above example, you can see we have created an element. We have used ReactDOM.render() to render element. This method takes element to be rendered and the location of the HTML element where we want to render it.

Updating React Element Into DOM

React elements are immutable. So the only way to update React element is to create a new element and pass it to the ReactDOM.render() function. You can better relate this with time display function.

Let’s see a display time example.

Note: Below code needs to put into React Environment. Otherwise, it will won’t work.

Put below code in HTML file.

Put below code in Js file.

In the above example, you can see every time Tick component called by setInterval, new Date() sets new date-time. So the new element gets created every time. See a practical example here.

React DOM always compare its elements and children elements with the previous one. According to this, it will always update only required part in DOM.

Tutorial Funda

Tutorial Funda will keep you updated with the latest Programming Languages, Software Tools and related technologies used in Software Development.

Leave a Reply

Your email address will not be published. Required fields are marked *