Intro to React Hooks- Part 7

Now that we have a general understanding of the Effect Hook, useEffect, we’ll dive into some examples of when and how to use it. As a refresher from the previous post, useEffect is used for causing side effects in functional components. And it’s capable of handling what the componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods would normally take care of in class components.

This post will cover our first example with the useEffect Hook, showing how it can do the same thing as the lifecycle methods componentDidMount and componentDidUpdate, but in a functional component. As a reminder, please take a look at the previous post in this series, Part 6, to familiarize yourself with the useEffect Hook before reading on.

First, Class Component

Let’s first review what the code would look like for this example if we did not utilize the useEffect Hook, instead using lifecycle methods in a class component:

// ClassCounter.js
import React, { Component } from 'react';
class ClassCounter 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 ClassCounter
// App.js
import React from 'react';
import './App.css'
import ClassCounter from './components/ClassCounter'
function App() {
  return (
    <div className='App'>
      <ClassCounter />
    </div>
  )
}
export default App

Our example here is simply a component that updates the document title with a counter value. To break down the above:

• We have a class component, with a constructor initializing the count value to 0
• In componentDidMount, we use the initial value of count and set the document title to that count value
• In the render method, we have a button with an onClick that increases the count value by 1
• Then, in componentDidUpdate, we set the document title again to the updated count value

So if we include this ClassCounter component in App.js and take a look at the browser, you’ll see that initially the document title shows “Clicked 0 times”. Then, when you click on the button, the count value increases by 1 and updates the document title accordingly.

Now, we’ll see how we can produce this same functionality with a functional component. More specifically, replacing componentDidMount and componentDidUpdate with the useEffect Hook.

Functional Component with useEffect

Let’s see what this same example with the same functionality looks like when using the Effect Hook in a functional component:

// HookCounter.js
import React, { useState, useEffect } from 'react';
function HookCounter() {
  
  const [count, setCount] = useState(0)
  useEffect(() => {
    document.title = `Clicked ${count} times`
  })
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    <div>
  )
}
export default HookCounter
// App.js
import React from 'react';
import './App.css'
import HookCounter from './components/HookCounter'
function App() {
  return (
    <div className='App'>
      <HookCounter />
    </div>
  )
}
export default App

Here’s the breakdown:

• First, we create a functional component and implement the counter using the State Hook, useState, setting the initial state value of count to 0
• Next, we add a button with a click handler to increase the count value; the innerHTML displays the count variable, and the onClick calls setCount passing in ‘count + 1'
• Then, after remembering to import useEffect from react, we call our useEffect Hook- just like useState it is also a function, being passed a parameter that is another function that gets executed after every render of the component; here we’re passing in an arrow function which updates the document title

If you go to the browser to test this out, you’ll see that initially the document title shows ‘Clicked 0 times’ and then when the button is clicked, the count value increases by 1 and the document title is updated accordingly. Everything is working the same as when using a class component, but now we’re causing side effects from a functional component using the Effect Hook, useEffect.

As you can see when comparing the two examples, the useEffect Hook allows us to have the same functionality while writing much less code. And we can completely replace both componentDidMount and componentDidUpdate with just useEffect.

Summary

Let’s dive a bit deeper into how this works. When we call useEffect, we’re basically requesting that React execute the function being passed as an argument every time the component renders. useEffect runs after every render of the component.

It’s exactly the same as the class component with lifecycle methods. On initial render, componentDidMount, we execute some code and then on every render after that, componentDidUpdate, we want to execute the same code.

With Hooks, we’re able to do all of this in one block of code, thanks to useEffect. It runs both after the first render, and after every update. And we place the Hook inside the component because we can then easily access the components state and props without having to write any additional code.

This concludes our first example with useEffect, using this Hook to cause side effects in a functional component. Thanks as always for reading and see you next time for Part 8!