Skip to content
Related Articles

Related Articles

Explain the initial cycle in React which happens during the first render ?

View Discussion
Improve Article
Save Article
  • Last Updated : 15 Jun, 2022
View Discussion
Improve Article
Save Article

We have seen different phases of Lifecycle methods initialization, mounting, updating, and unmounting in which the mounting phase plays a major role. So first let’s understand the mounting phase and its sub-methods which involve the lifecycle and then we come to know the initial cycle in the first render with the help of running code examples.

Mounting: Methods which are called when an instance of the component is being created and inserted into the dom.

Prerequisite: LifeCycle Method in ReactJs

The methods called in order during mounting in class-based component:

Constructor()

This is a special function that will be called whenever a new component is created

Binding state and event handlers

Do not cause side effects like making ajax calls

The super(props) called base class constructor and overwrite this.state

static getDerivedStateFromProps()

When state of the component depends upon changes in props over time

Initial state of component depends upon the props being passed to the component in such case this method is used to set the state

It does not have access to this keyword so it simply return an object that represent new state

render()

The required() method in class component

Simply read this.props and this.state and return JSX

It is a pure function

Do not change state or interact with DOM or making ajax calls

Children component life cycle method also get executed

Whenever there is mounting and update cycle render function could get run and update cycle happens whenever props changes and state update.

componentDidMount()

Invoked only once in whole life cycle of methods

Invoked immediately after component and all its children components have been rendered to the dom cause side effects

Load data by making network requests

So this cycle or order described above is initially followed during the first render.

Creating React Application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project structure:

 

Example: This code will run in the project structure filename mentioned below. In this example we have to show that these sequence is followed using console.log

App.js

import './App.css'
import { Component } from 'react'
class App extends Component {
    constructor() {
        //constructor call first 
        console.log("1")
        super();
        this.state = {
            name: { 
                firstname: "organisation", 
                lastname: "Article" },
            company: "Geeks for Geeks",
            color: "white"
        };
    }
    componentDidMount() {
        // After first default set value then 
        // componentDidMount execute
        console.log("3")
        setInterval(() => {
            this.setState({ color: 'red' });
        }, 5000)
    }
    render() {
        // Render call second during first cycle
        console.log("2")
        return (
            <div className="App">
                <p
                    style={{
                        color: this.state.color,
                        textAlign: 'center',
                    }}
                >
                    {this.state.name.firstname} 
                    {this.state.name.lastname} ,
                    tell u about {this.state.company}
                </p>

                <button onClick={() => {
                    this.setState(() => {
                        return {
                            name: { 
    firstname: 'Gfg', 
    lastname: 'Initial cycle of RENDER Article'}
                        }
                    });
                }}>change name</button>
            </div>
        );
    }
}

export default App;
App.css

@import url("https://fonts.googleapis.com/css2?family=Bigelow+Rules&display=swap");

body {
    margin: 0%;
    padding: 0%;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: linear-gradient(
        to left,
        rgba(0, 40, 141, 1) 0%,
        rgb(0, 181, 181, 1) 100%
    );
    text-align: center;
    background-color: blueviolet;
}

Steps to start the application: Write the below code in the terminal to start up the application:

npm start

Output:

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!