Overview of the Component Lifecycle

The React component lifecycle broadly comprises of two different segments:

• The initial mount lifecycle (when React attempts to build the component for the first time and inserts it into the DOM)
• The update lifecycle (after the component has been loaded and rendered for the first time and now is in a state of watching and updating for changes), which loops back on itself over and over

Let's have a look at the various methods that make up each of these component lifecycle stages in the following diagram:

Figure 4.1: Flow of React lifecycle methods

All methods comprising the mount lifecycle are executed first. Then, the program flow proceeds to the update life cycle methods, which are executed repeatedly as long as the component is alive. Let's take a look at the lifecycle itself in this diagram:

In Figure 4.1, we will focus almost entirely on the following pointers:

• constructor(): The...