Rerender react element

Day 10 of #100daysofcode

Today we will learn about rerendering in react.

Our initial code will be :

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.

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.

Let’s create some additional code to figure out what’s going on.

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

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.