Q379: What is the lifecycle methods order in mounting? - React & Modern Frontend (445 Qs)

The lifecycle methods are called in the following order when an instance of a component is being created and inserted into the DOM.

scss

1. `constructor()`
2. `static getDerivedStateFromProps()`
3. `render()`
4. `componentDidMount()`

Code Example

tsx

import React, { Component } from 'react';

class MountingOrderTracker extends Component {
  // Step 1: constructor initializes state
  constructor(props: any) {
    super(props);
    console.log('1. constructor()');
    this.state = { ready: false };
  }

  // Step 2: static getDerivedStateFromProps computes state before render
  static getDerivedStateFromProps(props: any, state: any) {
    console.log('2. static getDerivedStateFromProps()');
    return null;
  }

  // Step 3: render returns virtual DOM elements
  render() {
    console.log('3. render()');
    return <div>Mounting Order Verification</div>;
  }

  // Step 4: componentDidMount runs once DOM node is inserted
  componentDidMount() {
    console.log('4. componentDidMount()');
  }
}