Create a custom hook to fetch the games

src/components/GameGrid.tsx

@@ -1,27 +1,8 @@
 import { Text } from "@chakra-ui/react";
-import React, { useEffect, useState } from "react";
+import useGames from "../hooks/useGames";
-import apiClient from "../services/api-client";
-
-interface Game {
-  id: number;
-  name: string;
-}
-
-interface FetchGamesResponse {
-  count: number;
-  results: Game[];
-}
 
 const GameGrid = () => {
-  const [games, setGames] = useState<Game[]>([]);
+  const {games, error} = useGames();
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    apiClient
-      .get<FetchGamesResponse>("/xgames")
-      .then((res) => setGames(res.data.results))
-      .catch((err) => setError(err.message));
-  });
 
   return (
     <>

src/hooks/useGames.ts

@@ -0,0 +1,36 @@
+import { CanceledError } from "axios";
+import { useEffect, useState } from "react";
+import apiClient from "../services/api-client";
+
+interface Game {
+  id: number;
+  name: string;
+}
+
+interface FetchGamesResponse {
+  count: number;
+  results: Game[];
+}
+
+const useGames = () => {
+  const [games, setGames] = useState<Game[]>([]);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    apiClient
+      .get<FetchGamesResponse>("/games", { signal: controller.signal })
+      .then((res) => setGames(res.data.results))
+      .catch((err) => {
+        if (err instanceof CanceledError) return;
+        setError(err.message)
+      });
+
+    return () => controller.abort();
+  }, []);
+
+  return { games, error };
+}
+
+export default useGames;