Curriculum
Course: React
Login

Curriculum

React

Text lesson

Lifecycle of Components

Each React component has a lifecycle that you can monitor and manage across its three main phases: Mounting, Updating, and Unmounting.

Mounting

Mounting refers to the process of inserting elements into the DOM. React has four built-in methods that are called in the following order during component mounting:

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

The render() method is mandatory and will always be called, while the others are optional and will be invoked if you define them.

constructor

The constructor() method is called first when the component is initialized and is the ideal place to set up the initial state and other values. It receives props as arguments, and you should always begin by calling super(props) to invoke the parent’s constructor, which enables the component to inherit methods from its parent (React.Component).

Example:

The constructor method is called by React each time a component is created.

class Header extends React.Component {
 constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
 }
 render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
 }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

 

getDerivedStateFromProps

The getDerivedStateFromProps() method is called just before rendering the element(s) to the DOM. It is the appropriate place to update the state based on the initial props. This method takes props and state as arguments and returns an object with the updated state. In the example below, the favorite color starts as “red,” but getDerivedStateFromProps() updates it according to the favcol attribute.

Example:

The getDerivedStateFromProps method is called immediately before the render method.

class Header extends React.Component {
 constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
 }
 static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
 }
 render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
 }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header favcol="yellow"/>);

render

The render() method is required and is responsible for generating the HTML that is output to the DOM.

Example:

A basic component with a straightforward render() method:

class Header extends React.Component {
 render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
 }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

 

componentDidMount

The componentDidMount() method is called after the component has been rendered. This is where you execute statements that depend on the component being placed in the DOM.

Example:

Initially, my favorite color is red, but just wait a moment, and it will change to yellow.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);