This video is available to students only

useEffect Hook

useEffect is a game-changing hook: originally compared to lifecycle methods in React components, it's close but not truly a direct comparison.

Introducing the useEffect Hook, the second most useful of all the React Hooks, in my opinion. This lesson will explore how useEffect works as well as how it stacks up against traditional React lifecycle methods.

This hook is the hook that performs "side effects" in functional components. In the introductory lesson of this module, I defined side effects as functions modifying variables outside of their scope, and up to now, only class-based stateful components could cause these sorts of side effects with methods like componentDidMount and componentWillUpdate.

useEffect allows for these same sorts of actions: making API calls to fetch data, updating the DOM, subscribing to event listeners. But it allows for them with more modularized, fine-grained control than was previously possible.

Sample useEffect code#

In this example, I've got two ways in which the useEffect Hook is commonly used, which also lets me compare it to how a class-based component might perform the same tasks.

useEffect only on page load (like componentDidMount)#

The first thing you'll notice about this example is that an adorable dog photo loads on component render from a free, public API named Dog API.

If you'd like to see all the info this API returns, just paste this line into a new browser tab: https://dog.ceo/api/breeds/image/random.

Now refresh the component in the example. You should see a new dog photo now. How does this happen? The first useEffect Hook in the code.

How does useEffect work?#

So what does useEffect do? It tells your React component that it needs to do something after render. React will remember the function you passed and call it later after performing DOM updates. In this effect, we're fetching and setting data, but it could be doing any number of other things.

Place useEffect inside components#

By placing useEffect inside the component, it lets you access the image state variable (or any props) right from the effect. There's no need for a special API to read it — it’s already in the function scope. Hooks heavily embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.

Let's talk about the makeup of the useEffect Hook, and then we'll examine how it applies to our examples.

useEffect's arguments#

The useEffect Hook doesn't return any values of its own but instead takes two arguments. The first argument is required, and the second is optional (but is highly recommended at all times to prevent the component re-rendering on every state change).

useEffect argument #1: The callback (required)#

The first argument is the effect callback function we want the hook to run (i.e., the effect itself).

That looks like this:

useEffect basic syntax

By default, the effect stated in a useEffect Hook runs when the component first renders and after every update (but this is easily customized to only render when you want it to, which we'll cover next).

useEffect argument #2: The dependency list (optional)#

The second argument of the useEffect Hook is optional and is a dependency list that allows us to tell React to skip applying the effect only until certain conditions are met.

In other words, the second argument of the useEffect Hook allows us to limit when the effect runs. It gives us that more fine-grained control I talked about earlier.

Start a new discussion. All notification go to the author.