Replacing Component Lifecycles with the useEffect Hook, in React

Introduction

React Hooks are revolutionizing the way we develop in React and solving some of our biggest concerns. The useEffect Hook allows us to replace repetitive component lifecycle code.

Essentially, a Hook is a special function that allows you to “hook into” React features. Hooks are a great solution if you’ve previously written a functional component and realize that you need to add state to it.

If you’re new to Hooks and would like an overview, check out the introduction to React Hooks.

This article assumes that you’re familiar with the useState Hook. If you’re not, never fear! If you spend a little time with Convert a React Class-Based Component to a Functional One Using a State Hook you’ll be on the right track!

About useEffect

useEffect is short for ‘use side effect’. Effects are when our application reacts with the outside world, like working with an API. It allows us to run a function based on whether something changed. useEffect also allows us to combine componentDidMount and componentDidUpdate.

About Our App

We’ll be taking some prewritten class-based code and converting it to a functional component. We’ll be using reactstrap to simplify our formatting and axios to call an external dummy API.

Specifically, we’re using jsonplaceholder to pull-in dummy user data on our initial component mount.

Then we are triggering the component to re-render based on a user click and pulling in additional data about the users.

Getting Started

Just clone over the repo with the starting code:

$ git clone https://github.com/alligatorio/use-effect-hook
$ npm i
$ npm start

---

Take a moment to familiarize yourself with the code, in particular, the ClassBasedComponent.js file.

You’ll notice that we have two lifecycle methods in this file, componentDidMount and componentDidUpdate.

async componentDidMount() {
  const response = await axios
    .get(`https://jsonplaceholder.typicode.com/users`);

  this.setState({ users: response.data });
};

async componentDidUpdate(prevProps) {
  if (prevProps.resource !== this.props.resource) {
    const response = await axios
      .get(`https://jsonplaceholder.typicode.com/users`);

    this.setState({ users: response.data });
  }
};

---

These are both async lifecycle methods that call the jsonplaceholder API to bring in a list of users.

In componentDidMount, we say on first render, get the user data. Next, on componentDidUpdate we look to see if anything has changed in props. This can be triggered from user initiated events, like in our example, a button press. Once the change is detected we say, go out and get the data again.

We would like to condense the lifecycle methods into the useEffect Hook and create a function-based component.

Create a Component

Rather than using the same ClassBasedComponent.js file, create a new file called FunctionBasedComponent.js. We’re creating a new file so that we can contrast and compare the two.

In your terminal, you can run the following to create the new file from your root directory:

$ touch FunctionBasedComponent.js

---

To help get started, copy and paste the code below into your new file:

import React, { useState, useEffect } from 'react';
import { Container, Button, Row } from 'reactstrap';
import axios from 'axios';

const FunctionBasedComponent = () => {
  return (
    <Container className="user-list">
      <h1>My Contacts:</h1>
    </Container>
  )
};

export default FunctionBasedComponent;

Now hop over to your App.js file, import your FunctionBasedComponent.js file and replace ClassBasedComponent with FunctionBasedComponent.

---

Let’s start by initializing state with useState.

const [ users, setUsers ] = useState([]);
const [ showDetails, setShowDetails ] = useState(false);

To quickly recap on useState, to initialize state with the useState hook, we declare both our variable and the function that corresponds to the variable in an array and then we pass useState() the argument that we’d like to initialize our variable with.

• The users state variable is initialized with an empty array and given the function of setUsers.
• The showDetails state variable is initialized with the value of false and assigned the function of setShowDetails.

Add an API Call

Let’s go ahead and add in our API call as the fetchUsers function.

const fetchUsers = async () => {
  const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);

  setUsers(response.data);
};

We are essentially pulling this async call from the former componentDidMount and componentDidUpdate functions.

Keep in mind we cannot use an async function directly inside useEffect. If we ever want to call an async function, we need to define the function outside of useEffect and then call it within useEffect.

The useEffect Argument

Let’s talk about the useEffect hook for a moment. Much like componentDidMount, useEffect will immediately call our function.

useEffect( () => {}, [ 'value' ]);

By default, useEffect looks to see if the array values are different and if they are different, the arrow function is automatically called.

useEffect( () => {}, [ 'different value' ]);

---

Let’s flip back to our code editor and add the useEffect hook below our latest function where we will call fetchUsers.

useEffect( () => { fetchUsers(users) }, [ users ] );

Common Issues

• If you don’t pass an array into the useEffect Hook, your component will continuously reload repeatedly.

useEffect( () => { fetchUsers(users) } );

• If you pass an empty array, we are not watching any variables, and therefore it will only update state on the first render, exactly like componentDidMount.

useEffect( () => { fetchUsers(users) }, [] );

• Every time we create an object in JavaScript, it is a different object in memory. Though the code below looks the same, the page will be re-rendered because each object is stored in a different memory address. The same logic applies for arrays.

useEffect( () => { fetchUsers(users) }, [{ user: 'Alli Alligator' }] );

useEffect( () => { fetchUsers(users) }, [{ user: 'Alli Alligator' }] );

• useEffect function must return a cleanup function or nothing.

---

To demonstrate triggering another re-render, copy and paste the code below into your FunctionBasedComponent.js file:

import React, { useState, useEffect } from 'react';
import { Container, Button, Row } from 'reactstrap';
import axios from 'axios';

const FunctionBasedComponent = () => {
  const [ users, setUsers ] = useState([]);
  const [ showDetails, setShowDetails ] = useState(false);

  const fetchUsers = async () => {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);

    setUsers(response.data);
  };

  useEffect( () => { fetchUsers(users) }, [ users ] );

  const handleClick = event => { setShowDetails(!showDetails) };

  return (
    <Container>
      {
        users.map((user) => (
          <ul key={ user.id }>
            <li>
              <strong>{ user.name }</strong>
              <div>
                <Button
                  onClick={ handleClick }
                >
                  { showDetails ? "Close Additional Info" : "More Info"  }
              </Button>
               { showDetails &&
                 <Container className="additional-info">
                   <Row>
                     { `Email: ${ user.email }` }
                   </Row>
                   <Row>
                     { `Phone: ${ user.phone }` }
                   </Row>
                   <Row>
                     { `Website: ${ user.website }` }
                   </Row>
                 </Container>
               }
              </div>
            </li>
          </ul>
        ))
      }
    </Container>
  )
}

export default FunctionBasedComponent;

Now we have an onClick event within a button. On the button click, the state of showDetails is changed, triggering a re-render that will call again to the API and bring in the additional details that we need.

Voilà!

async componentDidMount() {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users`)
    this.setState({ users: response.data })
};

async componentDidUpdate(prevProps) {
  if (prevProps.resource !== this.props.resource) {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users`)
    this.setState({ users: response.data })
  }
};

Becomes:

const fetchUsers = async () => {
  const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);

  setUsers(response.data);
};

useEffect( () => { fetchUsers(users) }, [ users ] );