 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 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">The unused power of <code>useEffect</code></h1><div data-node-type="summary" class="summary-block">In this post, we will discuss the <code>useEffect</code> hook offered to us by React Hooks which lets us perform side effects in function components.</div><p>The release of React Hooks offered a new method of using React where we do not need class-based components.</p><p>Before the introduction of React Hooks, all state was managed in class-based components.  Function components were just used as <code>dummy</code> components i.e. just used to display data passed in by the use of props.</p><p>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</p><p>In addition to this, we also need some lifecycle method that would behave similarly to <code>componentDidMount</code> and <code>componentDidUpdate</code>, along came <code>useEffect</code> which gave us the power to handle side effects in function components.</p><p>In React, there are two common side effects, side effects that require clean up and side effects that don't, <code>useEffect</code> can handle both of these side effects.</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>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.</p></div></div><h2><a name="what-you-will-learn?">What you will learn?</a></h2><p>By the end of this post, you will be able to:</p><ul><li><p>Identify when you should use <code>useEffect</code></p></li><li><p>The interface for using <code>useEffect</code></p></li><li><p>Manage side effects in functional components</p></li><li><p>Be able to build reusable, resilient functional components that have the same power as class-based components</p></li></ul><p>With the above knowledge in place, you will be able to build out an entire application with just function components.</p><h2><a name="what-do-you-need-to-know?">What do you need to know?</a></h2><p>To get the most of this article, we assume you're familiar with the component basics in React &amp; React Hooks and also core JavaScript.  </p><p>If you do not know any of the above but would like to learn, here are some great resources:</p><ul><li><p><a href="https://www.freecodecamp.org/learn" rel="noopener noreferrer nofollow">freecodecamp </a>is a great free resource that will help you become an expert at JavaScript</p></li><li><p>The <a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer nofollow">React </a>docs are great for getting started with react but to become an expert I recommend <a href="https://www.newline.co/fullstack-react/" rel="noopener noreferrer nofollow">fullstack react</a></p></li></ul><p>Now let's get into it!</p><h2><a name="the-useeffect-interface">The <code>useEffect</code> interface</a></h2><p>We will first look at how we can implement <code>useEffect</code> into your application.  The React team has made this quite simple for us.</p><p>The interface for <code>useEffect</code> is quite simple, it accepts two arguments, a function, and an array:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-PHD2l" id="cm-PHD2l">useEffect(fn, [])</textarea><p>The first thing we need to do is <code>import useEffect:</code> </p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-yRGnI" id="cm-yRGnI">import React, { useEffect } from 'react';</textarea><p>Then we can use it in our component:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-fOHHp" id="cm-fOHHp">import React, { useEffect } from 'react';

function MyComponent () {
  useState(() =&gt; {}, [])
}</textarea><p>Now let's look at the main points of <code>useEffect</code>:</p><ul><li><p><code>useEffect</code> tells our component what to do when it renders which is determined by the function we pass to it</p></li><li><p><code>useEffect</code> will also run this function on each update although we have the ability to control this</p></li><li><p><code>useEffect</code> must be used within the scope of a function component</p></li></ul><p>With all the theory we need in place,  we will now look at an example in order to put our knowledge to use.</p><h2><a name="getting-elements-refs-using-useeffect-and-useref">Getting elements refs using <code>useEffect &amp; useRef</code></a></h2><p>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.  </p><p><a href="https://reactjs.org/docs/hooks-reference.html#useref" rel="noopener noreferrer nofollow">In react, we use the </a><code><a href="https://reactjs.org/docs/hooks-reference.html#useref" rel="noopener noreferrer nofollow">useRef</a></code><a href="https://reactjs.org/docs/hooks-reference.html#useref" rel="noopener noreferrer nofollow"> hook to achieve this:</a></p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-R7tAS" id="cm-R7tAS">const square = useRef(null);</textarea><p>Then on your element:</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-uK4OQ" id="cm-uK4OQ">&lt;div ref={square} className="square" /&gt;</textarea><p>We then have reference to that element from the <code>.current</code> property of our <code>sqaure</code> ref.</p><p>In our example, we want a square to be rotating when our page loads.  We will be using the <a href="https://greensock.com/" rel="noopener noreferrer nofollow">Greensock</a> library for our animation as it keeps the animation code simple so we can focus on <code>useEffect</code>.</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>Greensock Animation API (<strong>GSAP</strong>) 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.</p></div></div><p>So our component could look like this:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-5qh60" id="cm-5qh60">const Square = () =&gt; {
  const square = useRef(null);
  // rotate our square ref for 500ms and keep repeating
  TweenMax.to(square.current, 0.5, {
    rotate: 360,
    yoyo: true,
    repeat: -1,
  });

  return &lt;div ref={square} className="square" /&gt;;
};</textarea><p>The problem with this is that the <code>.current</code> property isn't available to us when the page loads.</p><p>We will see the following error in the console:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200513032857703_target%20not%20found.png" attachmentid="2a1e4894-19b7-4687-9a37-183c75116192" contenteditable="false" data-width="597" data-height="123"><div></div></figure><p>To remedy this issue, we can put the animation code inside of the <code>useEffect</code> function which won't fire until the component has loaded.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-QLNSV" id="cm-QLNSV">const Square = () =&gt; {
  const square = useRef(null);
  useEffect(() =&gt; {
    TweenMax.to(square.current, 0.5, {
      rotate: 360,
      yoyo: true,
      repeat: -1,
    });
  });

  return &lt;div ref={square} className="square" /&gt;;
};</textarea><p>Now our <code>div</code> will rotate when the component has loaded, if you have used React before then this is very similar to <code>componentDidMount</code>.</p><p>The console will also have no errors.</p><p>Here is a link to a Codesandbox that you can play around it:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F8ydnf&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2F8ydnf&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F8ydnf%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><h2><a name="updating-the-document-with-useeffect">Updating the document with <code>useEffect</code></a></h2><p>Updating the <code>document</code> is also another very common example of using <code>useEffect</code>.  </p><p>So if you had an array of names declared like so:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-llOYg" id="cm-llOYg">const names = ["John", "Joe", "James", "Josh"];</textarea><p>We can store one of these names in <code>state</code>:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-1vBX4" id="cm-1vBX4">const [currentName, updateName] = useState(names[0]);</textarea><p>We can add a <code>button</code> that <code>onClick</code> will pick a random name:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-n2qNk" id="cm-n2qNk">&lt;button
  onClick={() =&gt; {
    updateName(names[Math.floor(Math.random() * names.length)]);
  }}
&gt;
  Update Name
&lt;/button&gt;</textarea><p>So when this button is clicked we want to update a <code>div</code> that has the class of <code>title</code>.  The code will look as follows:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-RURzG" id="cm-RURzG">document.querySelector(".title").innerHTML = currentName;</textarea><p>We want this to change every time that <code>currentName</code> is updated, we do this by adding the above like inside of <code>useEffect</code>.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-VcOIa" id="cm-VcOIa">useEffect(() =&gt; {
   document.querySelector(".title").innerHTML = currentName;
});</textarea><p>So every time our <code>currentName</code> changes, <code>useEffect</code> tells our component of what it needs to do when an update is performed i.e. in our case update the <code>innerHTML</code>.</p><p>The is the pattern of <code>useEffect</code>, <strong>state updates --&gt; run function</strong>.  In our next example, we will look at changing this pattern.</p><p>Here is the complete Codesandbox:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F3yf62&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2F3yf62&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F3yf62%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><h2><a name="fetching-data-with-useeffect">Fetching data with <code>useEffect</code></a></h2><p>Our final example is the most complicated but will help to even further our knowledge of <code>useEffect</code>.  In this example, we will also be using the second argument that we can pass to <code>useEffect</code>.</p><p>For our API, we are going to use the free <a href="https://pokeapi.co/docs/v2.html#pokemon" rel="noopener noreferrer nofollow">PokeAPI</a>.  We can query this API with an <code>id</code> and it will return the Pokemon who belongs to that <code>id</code> , the <code>id</code> can be passed as a <code>prop</code> to the component.</p><p>Finally, to fetch the data, we will be using <code><a href="https://github.com/axios/axios" rel="noopener noreferrer nofollow">axios</a></code>.</p><p>Our request will look like as follows:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-s2ePN" id="cm-s2ePN"> const result = await axios(`https://pokeapi.co/api/v2/pokemon/${id}/`);</textarea><p>So above the <code>${id}</code> part of our query string is the <code>id</code> that the user of the component will provide as a <code>prop</code>.  When fetching  data with React Hooks, you should place the code in <code>useEffect</code> so that the data will be fetched when the component mounts.</p><p>You can do this like so:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-zDK2C" id="cm-zDK2C">const [data, setData] = useState({});

useEffect(async () =&gt; {
  const result = await axios(`https://pokeapi.co/api/v2/pokemon/${id}/`);
  setData(result.data);
});</textarea><p>We declare some state initially where we can store our data, and then using the setter (<code>setData</code>) we can update <code>state</code> of our component.  You will also see that I am using <code>async</code>and <code>await</code> which is handling the promise being resolved.</p><p>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 <code>useEffect</code> function to fire again which will go through the entire process again and again and again......</p><p>How do we fix this?  We supply an empty array to the second argument of <code>useEffect</code>.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-y17tb" id="cm-y17tb">const [data, setData] = useState({});

useEffect(async () =&gt; {
  const result = await axios(`https://pokeapi.co/api/v2/pokemon/${id}/`);
  setData(result.data);
}, []);</textarea><p>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 <code>useEffect</code> running on component update.</p><p>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 <code>useEffect</code> shouldn't be asynchronous and instead, we should place the asynchronous function inside of the callback.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200519024015402_error.png" attachmentid="d2a81d8d-cf38-49b6-a0b0-5ff44bc5d439" contenteditable="false" data-width="470" data-height="222"><div></div></figure><p>Thankfully, this is quite an easy fix.  We need to create a function inside <code>useEffect</code> that will be our <code>async</code> function and then within that function we can make our request with <code>await</code> and set our state.  Then we simply call that function within the <code>useEffect</code> block.</p><p>Here is how it looks now:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-CMPf4" id="cm-CMPf4">useEffect(() =&gt; {
  const getData = async () =&gt; {
    const result = await axios(
      `https://pokeapi.co/api/v2/pokemon/${id}/`
    );
    setData(result.data);
  };
  getData();
}, []);</textarea><p>Great!  That is how you fetch data with <code>useEffect</code>, not so bad right?</p><p>Here is a Codesandbox that you can play around with:</p><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fh2ktn&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fh2ktn&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fh2ktn%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><h2><a name="conclusion"><br>Conclusion</a></h2><p>Today we learned:</p><ul><li><p>Learned when you should use <code>useEffect</code></p></li><li><p>The interface for <code>useEffect</code> and what each argument does</p></li><li><p>How to stop <code>useEffect</code> running when a component updates</p></li><li><p>Be able to build reusable, resilient functional components that have the same power as class-based components using Hooks</p></li></ul><p>In addition to the above, we also learned how to use <code>useEffect</code> to manage that action we take when our component updates.  We saw how <code>useEffect</code> can handle side effects in our components such as DOM manipulation and API requests.</p><p>If you're interested in learning further, I really recommend checking out this <a href="https://overreacted.io/a-complete-guide-to-useeffect/" rel="noopener noreferrer nofollow">long-form post by Dan Abramov</a>.</p><p>Have a great day.</p>

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

The unused power of useEffect

Responses (1)

Masterclasses

Tutorials

Fullstack React with TypeScript