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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #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
You might also like these
How to create a dynamic countdown using HTML and JavaScript?HTMLHow to create a sticky menu pin using CSS?CSSHow to convert an HTML radio buttons into a toggle switch using CSS?CSSHow to Use SQL MAX() Function with Dates?SQL/MySQLThe * arithmetic operator in Envision BasicEnvision BasicHow to get previous days or next days in PHP?PHP