Implementing React Hooks: useEffect

Docs: https://reactjs.org/docs/hooks-effect.html

GitHub: https://github.com/JoeG21/medium-ex/blob/master/react-hooks-useeffect/src/App.js

When learning hooks, useEffect is another important one to know and use in your application. Whenever we need some sort of side of effect to happen when we change our state then useEffect is perfect for that.

This is the same thing as using the lifecycle methods, like mounting and updating. But in a functional component, we don’t have access to those lifecycle methods. In order to get around this we use the useEffect hook

For our example we are going to build out this out.

First, we have to import useEffect from react like we did for useState. If you do not know useState then you can check out my blog on it! https://devjoe.medium.com/implementing-react-hooks-usestate-53e565669439

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

The most common form of useEffect is to pass in an arrow function. Everything inside this arrow function is going to be executed every single time our application renders. We can of course prove this by passing in a console log and inspecting our page

useEffect(() => {
console.log('hello')
})

As you can see, every time we re-render our application our console log fires off. Even thought this can be useful for certain things, it’s not the main purpose of useEffect. You really wanna render the component when it mounts or when a specific state update. You’ll likely find yourself using useEffect like this.

useEffect(() => {
console.log('hello')
}, [])

useEffect takes in a 2nd parameter which is an array. Anything you pass into the array is going to be values. Whenever those values change your hook is going to run the arrow function, however if your values stay the same the arrow function will not run. Of course we can test all of this again by putting in a console log inside our useEffect and outside of it.

console.log('render')
useEffect(() => {
console.log('hello')
}, [resources])

So I can pass our state into the array, and now whenever the values of the state changes it is going to run the arrow function. As you can see, even if we click on the same button it’s not going to run the arrow function.

The most important thing you need to understand from this is that whenever you change the values inside the array is going to run the useEffect’s arrow function. If you don’t change the values, it’s not going to run the useEffect’s arrow function!

useEffect(() => {
console.log('onMount')
}, [])

Now if we leave the array empty we can think of it as onMount. Since there is no values to change, it’s only going to run once the component renders. Since we can think of it as onMount then we can also do data fetching from a API. Allowing use to exactly say what to happen when something changes in our values.

I’m going to be calling on a dummy API from https://jsonplaceholder.typicode.com/ to test this out.

useEffect(() => {
  fetch(`https://jsonplaceholder.typicode.com/${resource}`)
  .then(response => response.json())
  .then(json => console.log(json));
}, [resource])

When we check out our console, we can see that it’s fetching to that API. And the reason why it’s fetching the “post” data is because, that’s the default state we have in our useState. Now if we change our state it’s going to change our data that we are fetching because of the ${resource} in the fetch. Importantly if we do not change our value in our state it’s not going to re-fetch to the same data even though how many times we select it!

Then we can simply add another state “list”, use setList to change our sate, and map through the data to display it.

const [list, setList] = useState([])
useEffect(() => {
  fetch(`https://jsonplaceholder.typicode.com/${resource}`)
  .then(response => response.json())
  .then(json => setList(json));
}, [resource])

However this is bad practice because we are not passing a unique key prop when we are mapping through the object. Usually you would add another component then map over it and pass in that key prop. But for simplicity reasons I’m not going to do this for our example.

Thank you for reading, you can of course check out the official documentation and my GitHub for the code!

Docs: https://reactjs.org/docs/hooks-effect.html

GitHub: https://github.com/JoeG21/medium-ex/blob/master/react-hooks-useeffect/src/App.js