This video is available to students only

How to Use the React useEffect Hook

We've managed to use the useState Hook to track and display listings data to our UI. In this lesson, we'll introduce the useEffect Hook and see how we can create an effect callback to query listings data the moment our component mounts.

The useEffect Hook#

📝 This lesson's quiz can be found - here.
🗒️ Solutions for this lesson's quiz can be found - here.
📃 Grab a cheatsheet for the different ways the React useEffect Hook can be used - here.

In the last lesson, we observed how the useState Hook helped keep track of the listings data fetched from our query as component state. As a result, we were able to present the listings state data in the UI. We also managed to have the listings query be refetched at any time the user deletes a listing.

To be able to query all the listings from the API, we attached a click listener that called our server.fetch() function to make the request. In a lot of applications we use day-to-day, queries and the display of data is often made at the moment a page is being rendered. In the context of our <Listings> component, we'll want our initial query to be made when the <Listings> component is being rendered for the first time. To help us achieve this, we'll use another very commonly used React Hook - the useEffect Hook.

useEffect#

The useEffect Hook allows us to perform side effects in our function components. Side effects are essentially anything where we want an "imperative" action to happen. API calls, updating the DOM, subscribing to event listeners - these are all side effects that we might like a component to undergo at different times.

The useEffect Hook is sometimes a little harder to grasp than the useState Hook so we'll spend some time explaining it in a little more detail.

We'll import the useEffect Hook from react in the Listings.tsx component file:

Just like how we've set up the useState Hook at the top level of the <Listings> component, we'll do the same for the useEffect Hook as well. We'll declare the useEffect right after our useState Hook.

Callback function#

The useEffect Hook doesn't return any values but instead takes two arguments. The first being required and the second optional. The first argument is the effect callback function we want the Hook to run (i.e. the effect itself). To get us started, let's place a console.log() message within the effect callback.

By default, the effect stated in a useEffect Hook runs when the component first renders and after every update. If we run our application right now, we'll notice the console.log() message is generated as our component is rendered. To determine when the component updates, we can hit the 'Query Listings' button and notice the console message be generated practically every time the component is being updated.

Dependency list#

The second argument of the useEffect Hook is optional and is a dependency list which allows us to tell React to skip applying the effect only until in certain conditions. In other words, the second argument of the useEffect Hook allows us to limit when the effect is to be run. If we simply place a blank empty array as the second argument, this is how we tell React to only run the effect on initial render.

If we launched our app, we'll notice the console message only be generated when the component first mounts.

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