In this article, we will learn about useEffect hook and how to implement side effects using useEffect hook?

The Effect Hook lets you perform side effects in functional  components. It is a close replacement for componentDidMount, componentDidUpdate and componentWillUnmount

The useEfffect hook  is used for causing side effects in functional components and the use effect is capable of handling what componentDidMount,  componentDidUpdate and componentWillUnmount lifecycle methods which is capable of doing in class components.

So in this article,  let's take a look at an example to see how to use the effect hook as a feature that can mimic componentDidMount and componentDidUpdate but in functional components.

For the benefit of the readers/viewers who are familiar with class components,  first quickly take a look at what the code looks like in a class component.

How to implement useEffect hook feature in Class Components

import React, { Component } from 'react'

class ClassCounterOne extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }

  componentDidMount() {
    document.title = `Clicked ${this.state.count} times`
  }

  componentDidUpdate(prevProps, prevState) {
    
      document.title = `Clicked ${this.state.count} times`
    
  }

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click {this.state.count} times
        </button>
      </div>
    )
  }
}

export default ClassCounterOne

Lets implement the same functionality in functional component using useEffect hook

How to implement useEffect hook feature in Functional Components

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

function HookCounterOne() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    document.title = `You clicked ${count} times`
  })
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        useEffect - Click {count} times
      </button>
    </div>
  )
}

export default HookCounterOne

Now that we know how to use the effect hook, let me explain how it all works?

When we specify useEffect we are basically requesting react to execute the function that is passed as an argument every time the component renders and you heard me right useEffect runs after every render of the component, that might seem a bit weird but conceptually it is what we are trying to do with class components as well.

On initial render we want to execute some code and on every render after that we want to execute the same code with hooks, we have used effect for that exact same purpose. It runs both after the first render and after every update.

We can of course customise that but let's save that discussion for another article. For now, all I want you to remember is that useEffect runs after every render 

The second detail to make note of is that useEffect is placed inside the component by doing this we can easily access the components state and props without having to write any additional code, so that is how we use the effect hook to cause side effects in a functional component.

Import useEffect from react call it within the component and pass in a function which has to be executed after every render of that component, in case we are basically updating the document titled after initial render and every subsequent render.