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.
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 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.
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
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.
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.
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