Complete guide to React component’s lifecycle methods

Think about what a React component does. It describes what to render. We know that it uses the render() method for this. However, sometimes, having only the render() method is not enough because what if we want to do something before or after the component has rendered? What if we want to be able to decide whether a component’s render() method should be called at all?

Looks like what we’re describing is a process during which the React component is rendered. This process has various stages, for example, before render, render, after render, and so on. In React, this process is called the component’s lifecycle. Each React component goes through this process. What we want is a way to hook into that process, and call our own functions at different stages of that process in order to have a greater control over it. For this purpose, React provides a number of methods that we can use to get notified when a certain stage in a component’s lifecycle process occurs. These methods are called the component’s lifecycle methods. They are called in a predictable order.

All the React component’s lifecycle methods can be grouped into three phases:

  • Mounting: This phase occurs when a component is being inserted into the DOM
  • Updating: This phase occurs when a component is being re-rendered into a virtual DOM to figure out if the actual DOM needs to be updated
  • Unmounting: This phase occurs when a component is being removed from the DOM
    Understanding React component's lifecycle methods

About the author

Deven Rathore

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest