YogeshChauhan . com

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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

An Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHPHigher Order Functions in JavaScript with ExamplesJavaScriptHow to change CSS with jQuery?CSSDynamically generate names in SCSS (animation example)SCSS@forward rule in SCSS (Sass)SCSSHow to create a link tag button using CSS?CSS