top of page
dp.jpg

Hi, thanks for stopping by!

Hope you are getting benefitted out of these articles. Don't forget to subscribe to the Newsletter where we will serve you with the curated content right at your mailbox.

Let the posts
come to you.

Sponsor the Author.

Redux Saga Tutorial | Hooks Vs Lifecycle method in React components. | Part 2.

Updated: Apr 14, 2022

A Complete Guide To Redux-Saga With React JS and Redux project.


Following is the overview of what we are planning to discuss in this article. So we will discuss a few of the following topics in the article in chronological order. This will be a 4 part series containing the information about React Saga.

React Tutorial Overview article.

React JS Lifecycle.

React JS component has a lifecycle of loading, mounting and unmounting which helps a developer decide when to call different lifecycle methods. There are various methods like componentDidMount, componentWillMount, and ComponentWillUnmount is a few of such method. In this article, we will be discussing some of these lifecycle methods in class-based components in react js and their counterpart in functional components.


React JS Lifecycle in Class-based component.

We have already created a class-based component whose code you can find below. This is a simple class-based component that just showcases a div with the text " I am class-based component".


import React, { Component } from "react";

export default class ClassBasedComponent extends Component{
    render(){
        return(
            <>
            I am class based component.
            </>
        )
    }
}

Let's create a few lifecycle methods which will help us understand the purpose of the lifecycle method in react js. Read more about the lifecycle through this link Click here.

A react js class based component showcasing different lifecycle methods
React Class Based component

In these, we have used componentDidMount and ComponetWillUnmount in this component. ComponentDidMount is called once the component is successfully mounted here we generally call any action which is sort of called while the component is initiated. ComponetWillUnmount is sort of a lifecycle method that is called once the component is unmounted from the UI. All the clean up is generally done in this method.


React JS Lifecycle in Functional component.

React js lifecycle is altogether a different concept as compared to the class-based components. Before the introduction of react-hooks, it was totally not possible to have all these lifecycle activities with a functional component.

With the increased acceptance, the react team introduced the concept of hooks which helped us achieve various lifecycle methods. Some of the most common types of hooks are useEffect, useState and useMemo, useRef etc. We can also create our custom hooks as well.


useEffect is the hooks that we will be using, that will help us replicate the

componentDidMount vs componentWillUnmount lifecycle method which we have used in the above class-based component example.


A functional component showcasing react hooks.
React Hooks

Copy Code for React hooks here.


import React, { useState, useEffect } from 'react';

function FunctionBasedComponent(props) {
    const [name, setName] = useState('This is class');
    // useEffect with empty dependency array is called component did mount.
    useEffect(() => {
        setTimeout(() => {
            setName("This is update inside componentDidMount")
        }, 1000);

        // This works as component did unmount
        return () => {
            console.log('This is called from clean function')
        }
    }, []);

    return <h1>Hello, {name}</h1>;
}

export default FunctionBasedComponent;

So by this method, we can achieve some of the lifecycle methods using hooks.


Hopefully, we are well through with the logic of hooks and more about the class-based components. So it's time to integrate with Redux, action and redux store. This redux part will be covered in the next part which you can check in the below important link section.

 

Here you can find the link for all the parts.

Important Links:

 
Video Tutorial Link

A video tutorial explaining the above concept.



 
Github Source Code

 

About The Author Apoorv Tomar is a Software developer and part of Mindroast. You can connect with him on Twitter, Linkedin, Telegram and Instagram. Subscribe to the newsletter for the latest curated content. Don’t hesitate to say ‘Hi’ on any platform, just stating a reference of where did you find my profile.

261 views

Comments


bottom of page