DEV Community

hxrshxd
hxrshxd

Posted on

Rerender react element

Day 10 of #100daysofcode

Today we will learn about rendering in react.
Our initial code will be :
Image description

As you can see, we have our rootelement, followed by a time variable that returns local time. Following that, we have a variable element that displays our time in div. The element is then rendered in rootelement.

If you run this code, you will notice that the time does not change continuously, but you must refresh the page for the time to be displayed correctly. We will need to write this for it.
Image description

You can see that we have our code in function tick and have setInterval to run every second. The time will now be displayed appropriately without the need to reload the website.

You may be wondering what the point of this is. If you look at the code, you'll notice that our div is changing all the time.
Image description

Let's create some additional code to figure out what's going on.
Image description

We used react.Fragment (<></>) to have two divs one after the other. Let us now examine the code.
Image description

You can notice that only our time div is rendering repeatedly. Because only what has to be rendered over and again is rendered, our page does not slow down.

That's all for now.
If you found this useful, please follow me on Twitter at @Hxrshxd for more.

Discussion (0)