useEffect is a game-changing hook: originally compared to lifecycle methods in React components, it's close but not truly a direct comparison.
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
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
Let's talk about the makeup of the
useEffect Hook, and then we'll examine how it applies to our examples.
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.