×

iFour Logo

Mount vs Render In React

Kapil Panchal - July 13, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
Mount vs Render In React

Introduction


Render is a class-based component that gets called and returns the set of instructions for creating DOM.

Mounting is when the component renders first time and indeed builds the initial DOM from that instruction.

What is rendering?


Render() method is the most important method in react. The render method is only used in the class component. Render() method is responsible for all the view which is rendered in the browser. This method returns JSX data with logic code. In fact, it always returns some value whenever it is null.

Render() method called at the first time of run of the project and still, the data will be managed as virtual DOM. Re-rendering can happen multiple times can we count nth times. when content gets updating of props, a re-rendering method called before any changes are made to the project is considered as virtual DOM. In the time the render() method is called and displaying view on the screen.

Render that only method that is HTML code to the DOM.

Example of rendering


Create a Simple react project for better understanding how its work

First, you have to create a Header.js

Index.js file already created while you create a new project.

You have to import Header.js in the Index.js file

index.js file

 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Header from './Header';
ReactDOM.render(
            
 
, document.getElementById('root') ); reportWebVitals();

Header.js file

 
 import React from 'react';
import ReactDOM from 'react-dom;
class Header extends React.Component {
  render() {
    return (
                

THIS IS THE CONTENT OF THE HEADER COMPONENT

); } } ReactDOM.render(

, document.getElementById('root'));

 
         
 App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
 }
                

What is Mounting?


Mounting is the actual process of transfer the virtual DOM into the final real DOM. Transfer react element into an actual DOM element in DOM tree. Mounting means putting elements into DOM.

The life cycle of mounting


There are three phases are :

Mounting:

  • constructor():

  • getDerivedStateFromProps():

  • render():

  • componentDidMount():

constructor():

The constructor method is called before anything else when the component is initiated, and its sets the initial state and initial values.

The constructor() method is passed the props, as arguments, and you should always call the super(props) before anything else, this will initiate the parent's constructor method and the component to inherit methods from its parent.

Example

 
import React from 'react';
import ReactDOM from 'react-dom;

class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
render() {
return (
               

MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR}

); } } ReactDOM.render(

, document.getElementById('root'));

getDerivedStateFromProps():

This method is always called before rendering the elements in the DOM. it takes a state as an argument and returns an object

Example of getDerivedStateFromProps

 
                import React from 'react';
import ReactDOM from 'react-dom;

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
              

MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR}

); } } render

we already discussed of render topic how it works and how it run so we don’t need to more explain this topic if you still have any doubt you can run this below example.

 
                import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
  render() {
    return (
              

THIS IS THE CONTENT OF THE HEADER COMPONENT

); } } ReactDOM.render(

, document.getElementById('root'));

componentDidMount():

The first component renders after the componentDidMount() method called the component is already placed In the DOM.

example of componentDidMount:

 
                import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
              

MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR}

); } } ReactDOM.render(

, document.getElementById('root'));

Updating:

The next phase is updated which update the component when the component re-render in the mounting and change their state and props use setState method

There are five methods in updating the component

  • 1. getDerivedStateFromProps()

  • 2. shouldComponentUpdate()

  • 3. render()

  • 4. getSnapshotBeforeUpdate()

  • 5. componentDidUpdate()

getDerivedStateFromProps:

Its also called in update method when the component gets updated or it may be said that change their state that time this method called.

Example of getDerivedStateFromProps:

 
                import React from 'react';
import ReactDOM from 'react-dom;

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
              

MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR}

); } } ReactDOM.render(

, document.getElementById('root'));

shouldComponentUpdate:

shouldComponentUpdate always returns a boolean value if you want to update then you have to set true if you don’t want to update then you have to set a false value in the method.

Example of shouldComponnetUpdate

 
                import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
              

MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR}

); } } ReactDOM.render(render:

, document.getElementById('root'));

render method same as above we discussed in Mounting

getSnapshotBeforeUpdate

In this method, you have to always have to access the props and state before the update. When you called this method you have to always call componnetDidUpdate because you have to always need the previous state.

Example of getSnapshotBeforeUpdate:

 
                import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
              

MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR}

); } } ReactDOM.render(

, document.getElementById('root'));

componnetDidUpdate():

when the component is updated in DOM that time the componnetDidUpdate() method called.

example of componnetDidUpdate():

 
                import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
              

MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR}

); } } ReactDOM.render(

, document.getElementById('root'));

Unmounting

the component will unmount():

When the component will be removed from the DOM that time the componentwillunmount called.

 
 import React from 'react';
import ReactDOM from 'react-dom;

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false});
  }
  render() {
    let myheader;
    if (this.state.show) {
      myheader = ;
    };
    return (
{myheader}
); } } class Child extends React.Component { componentWillUnmount() { alert("The component named Header is about to be unmounted."); } render() { return (

Hello World!

); } } ReactDOM.render(, document.getElementById('root'));

Conclusion


This blog is all about render and mounting in React. Now through this blog, you get more clear how they differently work, what is the importance of render and mounting, why we use them in react, etc.

Mount vs Render In React Table of Content 1.Introduction 2.What is rendering? 3. Example of rendering 4. What is Mounting? 5. The life cycle of mounting 5.1. Mounting 5.2 Updating 5.3 Unmounting 6. Conclusion Introduction Render is a class-based component that gets called and returns the set of instructions for creating DOM. Mounting is when the component renders first time and indeed builds the initial DOM from that instruction. What is rendering? Render() method is the most important method in react. The render method is only used in the class component. Render() method is responsible for all the view which is rendered in the browser. This method returns JSX data with logic code. In fact, it always returns some value whenever it is null. Render() method called at the first time of run of the project and still, the data will be managed as virtual DOM. Re-rendering can happen multiple times can we count nth times. when content gets updating of props, a re-rendering method called before any changes are made to the project is considered as virtual DOM. In the time the render() method is called and displaying view on the screen. Render that only method that is HTML code to the DOM. Example of rendering Create a Simple react project for better understanding how its work First, you have to create a Header.js Index.js file already created while you create a new project. You have to import Header.js in the Index.js file index.js file   import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Header from './Header'; ReactDOM.render(  , document.getElementById('root') ); reportWebVitals(); Header.js file   import React from 'react'; import ReactDOM from 'react-dom; class Header extends React.Component { render() { return ( THIS IS THE CONTENT OF THE HEADER COMPONENT ); } } ReactDOM.render( , document.getElementById('root'));   App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } What is Mounting? Mounting is the actual process of transfer the virtual DOM into the final real DOM. Transfer react element into an actual DOM element in DOM tree. Mounting means putting elements into DOM. The life cycle of mounting There are three phases are : Mounting: constructor(): getDerivedStateFromProps(): render(): componentDidMount(): constructor(): The constructor method is called before anything else when the component is initiated, and its sets the initial state and initial values. The constructor() method is passed the props, as arguments, and you should always call the super(props) before anything else, this will initiate the parent's constructor method and the component to inherit methods from its parent. Example   import React from 'react'; import ReactDOM from 'react-dom; class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } render() { return ( MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR} ); } } ReactDOM.render( , document.getElementById('root')); Read More: Explain Authentication In React Application getDerivedStateFromProps(): This method is always called before rendering the elements in the DOM. it takes a state as an argument and returns an object Example of getDerivedStateFromProps   import React from 'react'; import ReactDOM from 'react-dom; class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } static getDerivedStateFromProps(props, state) { return {favoritecolor: props.favcol }; } render() { return ( MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR} ); } } render we already discussed of render topic how it works and how it run so we don’t need to more explain this topic if you still have any doubt you can run this below example.   import React from 'react'; import ReactDOM from 'react-dom'; class Header extends React.Component { render() { return ( THIS IS THE CONTENT OF THE HEADER COMPONENT ); } } ReactDOM.render( , document.getElementById('root')); componentDidMount(): The first component renders after the componentDidMount() method called the component is already placed In the DOM. example of componentDidMount:   import React from 'react'; import ReactDOM from 'react-dom'; class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } componentDidMount() { setTimeout(() => { this.setState({favoritecolor: "yellow"}) }, 1000) } render() { return ( MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR} ); } } ReactDOM.render( , document.getElementById('root')); Updating: The next phase is updated which update the component when the component re-render in the mounting and change their state and props use setState method There are five methods in updating the component 1. getDerivedStateFromProps() 2. shouldComponentUpdate() 3. render() 4. getSnapshotBeforeUpdate() 5. componentDidUpdate() getDerivedStateFromProps: Its also called in update method when the component gets updated or it may be said that change their state that time this method called. Example of getDerivedStateFromProps:   import React from 'react'; import ReactDOM from 'react-dom; class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } static getDerivedStateFromProps(props, state) { return {favoritecolor: props.favcol }; } changeColor = () => { this.setState({favoritecolor: "blue"}); } render() { return ( MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR} ); } } ReactDOM.render( , document.getElementById('root')); Planning to Hire Mobile App Development Company LET'S DISCUSS shouldComponentUpdate: shouldComponentUpdate always returns a boolean value if you want to update then you have to set true if you don’t want to update then you have to set a false value in the method. Example of shouldComponnetUpdate   import React from 'react'; import ReactDOM from 'react-dom'; class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } shouldComponentUpdate() { return false; } changeColor = () => { this.setState({favoritecolor: "blue"}); } render() { return ( MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR} ); } } ReactDOM.render(render: , document.getElementById('root')); render method same as above we discussed in Mounting getSnapshotBeforeUpdate In this method, you have to always have to access the props and state before the update. When you called this method you have to always call componnetDidUpdate because you have to always need the previous state. Example of getSnapshotBeforeUpdate:   import React from 'react'; import ReactDOM from 'react-dom'; class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } componentDidMount() { setTimeout(() => { this.setState({favoritecolor: "yellow"}) }, 1000) } getSnapshotBeforeUpdate(prevProps, prevState) { document.getElementById("div1").innerHTML = "Before the update, the favorite was " + prevState.favoritecolor; } componentDidUpdate() { document.getElementById("div2").innerHTML = "The updated favorite is " + this.state.favoritecolor; } render() { return ( MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR} ); } } ReactDOM.render( , document.getElementById('root')); componnetDidUpdate(): when the component is updated in DOM that time the componnetDidUpdate() method called. example of componnetDidUpdate():   import React from 'react'; import ReactDOM from 'react-dom'; class Header extends React.Component { constructor(props) { super(props); this.state = {favoritecolor: "red"}; } componentDidMount() { setTimeout(() => { this.setState({favoritecolor: "yellow"}) }, 1000) } componentDidUpdate() { document.getElementById("mydiv").innerHTML = "The updated favorite is " + this.state.favoritecolor; } render() { return ( MY FAVORITE COLOR IS {THIS.STATE.FAVORITECOLOR} ); } } ReactDOM.render( , document.getElementById('root')); Unmounting the component will unmount(): When the component will be removed from the DOM that time the componentwillunmount called.   import React from 'react'; import ReactDOM from 'react-dom; class Container extends React.Component { constructor(props) { super(props); this.state = {show: true}; } delHeader = () => { this.setState({show: false}); } render() { let myheader; if (this.state.show) { myheader = ; }; return ( {myheader}Delete Header ); } } class Child extends React.Component { componentWillUnmount() { alert("The component named Header is about to be unmounted."); } render() { return ( Hello World! ); } } ReactDOM.render(, document.getElementById('root')); Conclusion This blog is all about render and mounting in React. Now through this blog, you get more clear how they differently work, what is the importance of render and mounting, why we use them in react, etc.
Kapil Panchal

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.

Build Your Agile Team

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

Power Apps Solving 13 Legal Challenges
Power Apps Solving 13 Legal Challenges

There is a common misconception that bringing technology into the legal field won't be effective as this profession relies heavily on evidence and facts. However, if you look at it...

How to Automate Power BI Reports Using Power Automate
How to Automate Power BI Reports Using Power Automate

"Does Power Automate work with Power BI?”. If you think the same, you’re at the right place. Manual reporting plays an important role in business decision-making but requires more...

What’s New in .NET 9?
What’s New in .NET 9?

Today, we’re thrilled to present you with the first glimpse of .NET 9 release and let you know what features and updates you can anticipate in this new version. Various professionals believe that it’s the right time to explore and adopt the latest version of .NET for your upcoming projects. It is even recommended for projects built using .NET 6 or .NET 8, due to the framework updates made in this version.