 hook offered to us by React Hooks which lets us perform side effects in function components.

The release of React Hooks offered a new method of using React where we do not need class-based components.

Before the introduction of React Hooks, all state was managed in class-based components.  Function components were just used as 

 components i.e. just used to display data passed in by the use of props.

Function components also offered no lifecycle methods, so knowing when the component had mounted or when it updated was very difficult and could only be handled in class-based components

In addition to this, we also need some lifecycle method that would behave similarly to 

 which gave us the power to handle side effects in function components.

In React, there are two common side effects, side effects that require clean up and side effects that don't, 

A side effect is an application change that occurs outside of a called function.  Examples of this are DOM manipulation, setting up a subscription, or data fetching to name a few.

By the end of this post, you will be able to:

With the above knowledge in place, you will be able to build out an entire application with just function components.

To get the most of this article, we assume you're familiar with the component basics in React & React Hooks and also core JavaScript.  

If you do not know any of the above but would like to learn, here are some great resources:

We will first look at how we can implement 

 into your application.  The React team has made this quite simple for us.

 is quite simple, it accepts two arguments, a function, and an array:

import React, { useEffect } from 'react';

import React, { useEffect } from 'react';

function MyComponent () {
  useState(() => {}, [])
}

With all the theory we need in place,  we will now look at an example in order to put our knowledge to use.

It is very common to do an animation when a user sees your page, to do this we normally use a reference to the HTML element.  

We then have reference to that element from the 

In our example, we want a square to be rotating when our page loads.  We will be using the 

 library for our animation as it keeps the animation code simple so we can focus on 

) is an animation library that helps you create performant animations. It can be used safely (back to IE6!) to create animations without jank, and it's the only animation library (as far as I know) that handles SVG animations seamlessly.

 property isn't available to us when the page loads.

We will see the following error in the console:

To remedy this issue, we can put the animation code inside of the 

 function which won't fire until the component has loaded.

 will rotate when the component has loaded, if you have used React before then this is very similar to 

Here is a link to a Codesandbox that you can play around it:

 is also another very common example of using 

So if you had an array of names declared like so:

const names = ["John", "Joe", "James", "Josh"];

const [currentName, updateName] = useState(names[0]);

<button
  onClick={() => {
    updateName(names[Math.floor(Math.random() * names.length)]);
  }}
>
  Update Name
</button>

So when this button is clicked we want to update a 

document.querySelector(".title").innerHTML = currentName;

 is updated, we do this by adding the above like inside of 

useEffect(() => {
   document.querySelector(".title").innerHTML = currentName;
});

 tells our component of what it needs to do when an update is performed i.e. in our case update the 

.  In our next example, we will look at changing this pattern.

Our final example is the most complicated but will help to even further our knowledge of 

.  In this example, we will also be using the second argument that we can pass to 

For our API, we are going to use the free 

 and it will return the Pokemon who belongs to that 

Finally, to fetch the data, we will be using 

 const result = await axios(`https://pokeapi.co/api/v2/pokemon/${id}/`);

 that the user of the component will provide as a 

.  When fetching  data with React Hooks, you should place the code in 

 so that the data will be fetched when the component mounts.

const [data, setData] = useState({});

useEffect(async () => {
  const result = await axios(`https://pokeapi.co/api/v2/pokemon/${id}/`);
  setData(result.data);
});

We declare some state initially where we can store our data, and then using the setter (

 of our component.  You will also see that I am using 

 which is handling the promise being resolved.

If you were to run this code you would encounter a nasty bug, since we haven't supplied an array of dependencies (i.e. the second argument) we will get stuck in an infinite loop.  Our component will mount, then update our state which will cause the 

 function to fire again which will go through the entire process again and again and again......

How do we fix this?  We supply an empty array to the second argument of 

const [data, setData] = useState({});

useEffect(async () => {
  const result = await axios(`https://pokeapi.co/api/v2/pokemon/${id}/`);
  setData(result.data);
}, []);

This second argument is to define all the variables that the hook depends on i.e. the variables it needs to watch for changes, in our case, it depends on none so this will stop 

Great!  So there is one last thing we have to deal with.  The above code in Codesandbox gives the below error.  It is telling us that the callback we pass to 

 shouldn't be asynchronous and instead, we should place the asynchronous function inside of the callback.

Thankfully, this is quite an easy fix.  We need to create a function inside 

 function and then within that function we can make our request with 

 and set our state.  Then we simply call that function within the 

useEffect(() => {
  const getData = async () => {
    const result = await axios(
      `https://pokeapi.co/api/v2/pokemon/${id}/`
    );
    setData(result.data);
  };
  getData();
}, []);

Here is a Codesandbox that you can play around with:

In addition to the above, we also learned how to use 

 to manage that action we take when our component updates.  We saw how 

 can handle side effects in our components such as DOM manipulation and API requests.

If you're interested in learning further, I really recommend checking out this 

AUTHOR

Paul Ryan

In this post, we will discuss the useEffect hook offered to us by React Hooks which lets us perform side effects in function components.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

The unused power of useEffect

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript