Understanding React lifecycle methods

React provides methods to handle the data during the lifecycle of a component. This is very useful when we need to update our application at particular times.

How to do it...

In this section, we are going to explain each example independently.

Todo list – implementing ComponentWillMount

In this recipe, you will learn about the lifecycle methods in React. We will see how the information flows through the methods since the component is pre-mounted, mounted, and unmounted. The Todo list that we will develop in this recipe will look like this:

1. For this Todo list, we need to create a new folder called Todo into our components directory, and you also need to create files called Todo.js and Todo.css. This is the skeleton of the Todo component:

import React, { Component } from 'react';
import './Todo.css';

class Todo extends Component {
constructor() {
    super();
  }

componentWillMount() {

  }

render() {
return (
      <div className="Todo">
        &lt...