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
Filename: App.js
javascript
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; |
Filename: App.css
css
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:
