React lifecycle: 3 methods that you should not ignore

Shuvo Habib
The Startup
Published in
4 min readAug 20, 2019

--

React components have a lifecycle, and we are able to access or do our thing in specific phases of that lifecycle. There is a number of lifecycle methods. In this lesson, we’ll cover the three most important lifecycle methods and a demonstration in mounting and unmounting of your React components.

There are three main phases of a component which includes mounting, updating and unmounting.

Mounting, updating and Unmounting:

https://twitter.com/dan_abramov/status/981712092611989509

When our component is added to the DOM, this is called mounting, and when our component is removed from the DOM, this is called unmounting.
Update refers to the Growth of a component.

There are a handful of lifecycle methods we can access at various stages of this state.

The release of 16.3 introduced some new life-cycle functions, which replaced existing ones to provide better support for the new asynchronous nature of React. We’ll be starting with one of these methods, getDerivedStateFromProps.

1. getDerivedStateFromProps

--

--

Shuvo Habib
The Startup

I'm a storyteller about UX, Frontend dev technologies, and A/B testing