The 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.
📝 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.
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL