Lifecycle in React

In React, each stateful component goes through what is referred to in this framework as a lifecycle. Today I am going to go over a few things about these lifecycles and some of the common methods—also commonly referred to as hooks—used to control the different components of your app during the different phases of its lifecycle.

Lifecycle essentially just refers to the process of the React framework building a single component rendering it to the page, and removing it from the page (DOM). During this lifecycle, there are three main phases:

1. Mounting
2. Updating
3. Unmounting

Mounting

The most notable things this phase consists of are the constructor() and render() method. It is like the birth of your component. Any code in the constructor function will be executed immediately upon creating an instance of your component and affects its initial state, as constructor functions are normally known to do. The render method will usually just contain representations of the specific HTML elements that this component will consist of. Render is the only method that is actually required in a stateful component.

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      done: false
    };
  }
  render() {
    return (
      <div className='some-div'></div>
    );
  }
}

Next, we have the componentDidMount() method. Anything in this method will be executed immediately after the component's initial render and after it has been mounted—even though it is technically considered part of the mounting phase. This is a good method to include fetching of any outside data that your application will need, for example, from an API. By its name, we know that the component did successfully mount and render its initial state, so this helps to prevent any reference errors from occurring when React then goes to place that data into the template of the page. This is not to be confused with the now deprecated componentWillMount() which would have the potential for causing such an error in this case if the data were fetched before the elements that were to display them had been rendered on the DOM.

  componentDidMount() {
    // Displays a search for cats by default when page loads
    this.search('cats');
  }

Updating

If the state in a component has been changed via setState() or new props have been passed to it, there is a method known as componentDidUpdate() that will be run immediately after these changes if you wish to include it—separate from the re-rending that occurs automatically. The code in this method will be executed immediately after the visual changes have finished happening in the DOM.

componentDidUpdate(prevProps, prevState) {
  if (this.props.user !== prevProps.user) {
    this.fetchData(this.props.user);
  }
}

This could be useful if changing the props that are passed into your app meant that a different API should be called or the API should be called in a different way. Usually a conditional will be used to prevent an infinite loop.

Unmounting

Finally, we have the unmounting phase. This phase pretty much exclusively consists of the componentWillUnmount() method. Right before the component dies, or rather, before it is removed from the DOM, you might want to clean up a few things that this component relied on in your code and are now no longer necessary. For example, you could clear a setTimeout() or setInterval() that a particular DOM element is using.

componentWillUnmount() {
  clearInterval(this.timer);
}

Summary

• Mounting - Includes constructor(), render() and componentDidMount()
• Updating - componentDidUpdate()
• Unmounting - componentWillUnmount()

The only one of these methods that is actually required in a stateful component is render(). I have just touched on some of the more common methods, but there are a lot more that exist that may be useful which can be found in the docs at reactjs.org.