React Hooks useEffect – Managing the Lifecycle of Functional Components

React Hooks is one of the newer features of React. It was introduced in version 16.8.0 and has changed the way we will look at components in React going forward. In this post, we will specifically talk about React Hooks useEffect.

Basically, useEffect is one of the types of hooks that forms a part of the overall React Hooks implementation. Just like React Hooks useState, the useEffect hook also helps us do something that was earlier possible only with class components.

So let’s see what React Hooks useEffect helps us do.

1 – What is React Hooks useEffect?

The official version says something like this:

The Effect Hook can helps us perform side effects in a functional component

Sounds good!

But what are side effects?

Basically, stuff like fetching data through an API, subscribing to some event or changing DOM elements are all side effects.

If you have used class components before, you must have definitely come across lifecycle methods such as componentDidMount(), componentDidUpdate() and componentWillUnmount(). You must have used componentDidMount() to make API requests. Similarly, componentWillUnmount() to remove subscriptions or perform clean-up activities.

The UseEffect hook can basically do what all of these three lifecycle methods are capable of doing.

The only point is that being a hook, UseEffect can only be used in functional components.

2 – Handling Lifecycle in Class Components

In Class Components, the render method does not contain any side effect. This is because at that point, the DOM has not been updated. We typically don’t want to perform side effects before the DOM is ready.

Therefore, in Class Components, side effects are kept in lifecycle methods such as componentDidMount() or componentDidUpdate().

Below is an example:

import React from 'react';

export default class DemoComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        }
    }

    componentDidMount() {
        document.title = `You clicked ${this.state.counter} times`;
    }

    componentDidUpdate() {
        document.title = `You clicked ${this.state.counter} times`;
    }

    render() {
        return (
            <div>
                <p>You click counter is: {this.state.counter}</p>
                <button onClick={() => this.setState({ counter: this.state.counter + 1 })}>
                    Click
                </button>
            </div>
        )
    }
}

If you see above code, we are basically repeating the same logic in both the componentDidMount() and componentDidUpdate() methods. This is because we want to update the value of document.title at the time of component mounting as well as every time the component state changes.

3 – Handling Lifecycle in Functional Components

Let’s now see how we can handle the same situation as above in Functional Component using React Hooks useState.

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

export default function DemoFC() {

    const [counter, setCounter] = useState(0);

    useEffect(() => {
        document.title = `You clicked ${counter} times`;
    })

    return (
        <div>
            <p>You clicked {counter} times</p>
            <button onClick={() => setCounter(counter + 1)} >
                Click me
            </button>
        </div>
    )
}

So how does useEffect hook work?

Basically, by using this hook, we tell React that some action or task needs to be done after updating the DOM. In other words, after the render.

React will remember the function that was passed and call it later after the render is complete. In the above code, that’s updating the value of the document.title. Also, there is no duplication of logic in this case.

Another important aspect is that the useEffect hook is called inside the component. This allows it to access the state variable counter. Because hooks use the concept of Javascript closure, they are already in the function scope.

---

Basically, React Hooks useEffect makes it easier and neater to handle side effects such as API Calls or handling subscriptions in a React functional component. It also helps us avoid duplication in logic when we have to perform the same action in more lifecycle stages of a component.

Together with React Hooks such as useState, we can handle most of the features that only class components used to provide earlier. This makes the case for functional components in React even more stronger.