📝 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:

import React, { useState, useEffect } from "react";

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.

export const Listings = ({ title }: Props) => {

  const [listings, setListings] = useState(null);

  useEffect();

  // ...

};

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.

export const Listings = ({ title }: Props) => {

  const [listings, setListings] = useState(null);

  useEffect(() => {

    console.log("Effect has run!");

  });

  // ...

};

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.

export const Listings = ({ title }: Props) => {

  const [listings, setListings] = useState(null);

  useEffect(() => {

    console.log("Effect has run!");

  }, []);

  // ...

};

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

Instead of having our effect run once in the beginning and on every update, we can attempt to restrict the effect to run only in the beginning and when the component updates in a specific fashion. The component simply updating is a broad term - the component can update due when a certain state value changes, when its parent gets rerendered causing children components to re-render as well, etc. With the useEffect Hooks dependency list, we can fine-tune to which values the Hook should depend on to run the effect.

In our case, let's say we want to fire off a console message when the component update depends on the listings state value getting updated. We'll specify the listings value as a dependency in our useEffect Hook.