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

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.

• Redux Saga Tutorial | React JS, its setup. Creating class-based vs functional components. | Part 1.

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

• Redux Saga Tutorial | Redux setup in react React components. | Part 3.

• Redux Saga Tutorial | Implement redux-saga with ReactJS and Redux.| Part 4
  

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.

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.

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:

• Redux Saga Tutorial | React JS, its setup. Creating class-based vs functional components. | Part 1.

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

• Redux Saga Tutorial | Redux setup in react React components. | Part 3.

• Redux Saga Tutorial | Implement redux-saga with ReactJS and Redux.| Part 4

---

Video Tutorial Link

A video tutorial explaining the above concept.

---

Github Source Code

Source Code Link: https://github.com/apoorvtomar2222/redux-saga-tutorial

---

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.