Abort in useEffect skips second render/query

React
1

In the ultimate react course, final project, lesson 10: “Creating a Custom Hook for Fetching Games”, I’m running “npm run dev” and only getting one query to rawg.io.

In useGames.ts, I can comment or uncomment the line “return () => controller.abort();” to toggle whether I abort or not. When I don’t abort, I see two queries to rawg.io in the Network tab, and I actually get the list of games.

When I do abort, I only get one canceled query and I don’t get the list of games (naturally, because we never completed the query).

image
image1915×541 26.5 KB

I can just skip the abort for now, but does anyone have any ideas on what’s going wrong?

1 Like
2

I had “const controller = new AbortController();” outside of the useEffect. It must be inside.

1 Like
3

Thank you! Was having this same issue.