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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
How to set default timezone using PHP?PHPWhat are Big Data Clusters in SQL Server?SQL/MySQLAn Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHPHow to create a function in SCSS (Sass)?SCSSSQL Right JoinSQL/MySQLCasting in PostgreSQLPostgres