Yogesh Chauhan's Blog

What’s a page re-rendering in React?

in React on June 11, 2021

Here’s another post on rendering:

Rendering Elements in React

If your application stays same in appearance after the rendering then there is no need to render it again.

Re-rendering is only necessary when your app’s appearance keeps changing constantly or at least more than once.

It’s like creating a counter or a slider in which the visual appearance of the elements needs to be updated again and again. In React, you can do that using states.

You can also update a DOM element without changing its state.

Let’s see how to do that.


//App.js
import React from "react";

const App = ({ wait }) => {
  return <div>You're waiting since {wait} seconds!</div>;
};

export default App;



//index.js
import ReactDOM from "react-dom";
import App from "./App";

let wait = 0;

ReactDOM.render(<App wait={wait} />, document.getElementById("root"));

//You're waiting since 0 seconds!


The code above will render the element once but won’t update the number of seconds since you started waiting.

Even if you update the wait variable like this, it will only render the element once!



//index.js
import ReactDOM from "react-dom";
import App from "./App";

let wait = 0;
wait += 1;

ReactDOM.render(<App wait={wait} />, document.getElementById("root"));

//You're waiting since 1 seconds!


It’s not updating the DOM because we’re calling the ReactDOM.render just once!

We’re just updating the DOM once and that’s it. Let’s make a seperate function that will update the DOM each time we call.

Also, at the same time, using setInterval() method, let’s call it after each second and update the DOM.



//index.js
import ReactDOM from "react-dom";
import App from "./App";

let wait = 0;
wait += 1;

const updateDom = () => {
  ReactDOM.render(<App wait={wait} />, document.getElementById("root"));
};

setInterval(() => {
  updateDom();
  wait += 1;
}, 1000);


Calling the ReactDOM.render method again and again and updating the DOM is not recommended. Instead React recommended changing the states.


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
PHP arrays for US states’ full names and abbreviationsPHPNATURAL JOIN in PostgresPostgresA Step by Step Guide to Make RSS in XML For Any Website or Blog For FreeMiscellaneousWordPress: How to add a Search Icon in Menus with toggle effect using jQuery?jQueryCONCAT and CONCAT_WS Functions in PostgresPostgresClearwater Seafoods – B2C in ChinaMiscellaneous