React — Understanding Component lifecycle methods

A Beginner’s guide to React component lifecycle

Bhargav Bachina
Bachina Labs

--

While working with react, understanding component phases and lifecycle methods are very important for any successful react project. In this article, I am going to discuss these lifecycle hooks more in-depth and their use cases.

Component lifecycle is a continuous process which happens throughout the life of the application. Understanding the lifecycle leads to faster development, efficient and better optimization of your project. Every React Component goes through these four phases as shown in the above diagram. Let’s have a look.

  • Initialization
  • Mounting
  • Update
  • Unmounting

React provides a series of lifecycle methods which are invoked throughout this lifecycle process. we will discuss those as well.

Let’s create a sample project with react and understand the lifecycle hooks by adding one or two components. For the quick and complete code clone this repo.

git clone https://github.com/bbachi/react-life-cycle.git// install all dependencies
npm install
// start the app
npm start

--

--