Lifecycle methods and Hooks in React

A front-end framework plays a crucial role in deciding the success of any application. No matter how efficient the product is, if it doesn't have a User Interface (UI) that is interactive and well-organized, the chances of its success are very slim. However, you don't have to worry about that anymore. Thanks to the new age tools and platforms like ReactJS. With its extensive range of UI components, you can make the UI as good as the original product at the backend.

Lifecycle events in React play a crucial role while writing React components. Developers often need lifecycle events to handle various effects, such as fetching data on the mount, cleaning up before the component unmounts, sanitizing props when the component updates, etc. Before the release of 16.8.0, the most common way of handling lifecycle events required ES6 class-based components. For instance, if the code was written using functional React components, you needed to rewrite those components as classes that extend React Component with a dedicated render function. Only after that would it be possible to access the three most common lifecycle methods viz. componentDidMount, componentDidUpdate, and componentWillUnmount. Most developers prefer React these days because React is excellent at displaying data in a hierarchical component view. However, it is essential to decide how the components will fetch the data. There are multiple ways to do that, such as Fetch APIs, lifecycle methods, Suspense, Axios, Hooks, etc. In this blog, I will discuss React Hooks and the transition of components.

The React 16.8.0 version includes official support for Hooks.16.8 is one of the significant steps taken by the React ecosystem. Before 16.8, the class component was the only option to implement state and lifecycle methods. Earlier in a scenario where you needed to implement state or lifecycle methods in an existing functional component, refactoring code and changing that functional component to class component was the only way. But now, developers can implement their functional components with React development with the help of React Hooks. State and Lifecycle methods are the backbones of any React application, and Hooks enable functional components to implement them efficiently. Hooks allow you to use state and other React features without writing a class as they do not function inside classes.

So, if you plan to use React Hooks for the first time, this blog is for you. It will help you understand Hooks and how the transition happens when using the class components to the functional components. Here is what exactly I am going to talk about: 

• State management (class components vs. functional components)
• React lifecycle methods in class components and their subsequent implementation in React Hooks

Let’s discuss them one by one.

State Management (class components vs. functional components)

State is one of the most important concepts of the React ecosystem. It is the place where the data comes from in the component. It stores a component’s data and determines its behavior in the following way:

In class component:

In functional component:

React lifecycle methods in class components and their implementation in React Hooks

In React, each component has stages during its lifecycle, generally referred to as React component's lifecycle. There are different phases in the lifecycle, viz. Mounting, Updating, and Unmounting. Each phase has its methods - componentDidMount, componentDidUpdate, componentWillUnmount, etc. that help you perform life cycle operations on the components.

In class components, you can directly extend from React Component to access the lifecycle methods, but to use them in the functional components, and you need React Hooks.

Let's see in detail how these methods are executed:

componentDidMount

A lifecycle method runs or executes after the component is mounted and rendered to the DOM. It is called only once during the component's lifecycle after the component mounting is done.

In class component:

In functional component:

componentDidUpdate

It is a lifecycle method that executes after an update in the component and checks if a specific prop or state has changed.

In class component:

In functional component:

ComponentWillUnmount

It is a lifecycle method that runs or executes when the component is about to be removed or unmounted from the DOM. It is called only once during the lifecycle of a component.

In class component:

React Hooks provide a great deal of flexibility when it comes to implementing lifecycle methods. They enable a developer to choose how tightly or loosely lifecycle methods are coupled. I hope this blog will help you ease through the lifecycle methods. So, what are you waiting for? Go ahead and try these steps and let me know about your experience in the comments section below. Till then, Happy Coding!