What’s Lifecycle Anyway?

Let’s consider humans.

The Lifecycle of a Human

The typical lifecycle for a human is child to adult to elderly.

In the biological sense, lifecycle refers to the series of changes in form that an organism undergoes.

The same applies to React components. They undergo a series of changes in the form.

Here’s what a simple graphical representation for React components would be.

The Lifecycle of a React App

The four essential phases or lifecycle attributed to a React component include:

• Mounting — Like the birth of a child. At this phase the component is created (your code, and React’s internals) and then inserted into the DOM.

• Updating — Like humans “grow”. In this phase a React component undergoes growth by being updated via changes in props or state.

• Unmounting — Like the death of a human. This is the phase where the component is removed from the DOM.

• Error Handling — Think of this as similar to when humans fall sick and visit the doctor. Sometimes, your code doesn’t run or there’s a bug somewhere. When this happens, the component is in the error handling phase. I intentionally skipped this phase in the illustration earlier.

Lifecycle Methods

Now that you understand what lifecycle means, what are lifecycle methods?

Knowing the phases/lifecycle a React component goes through is one part of the equation. The other part is understanding the methods that React makes available, or invokes, at each phase.

Methods in React Lifecycle

The methods invoked during different phases/lifecycle of a component are popularly known as the component lifecycle methods. For example, in the mounting and updating phases, the render lifecycle method is always invoked.

There are lifecycle methods available on all 4 phases of a component — mounting, updating, unmounting, and error handling.

When you know the associated lifecycle/phase a lifecycle method is invoked in, you can go ahead and write related logic within the method and know that it’ll be invoked at the right time.

---

With the basics out of the way, let’s have a look at the new lifecycle methods available from version 16 onwards.