Mount vs Render In React

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();

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

         
 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;
 }
                

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

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

                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 (
              

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

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

                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 (
              

                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 (
              

                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 (
              

                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 (
              

                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 (
              

 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'));


              

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

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.