swrを利用してfetchする

app/package.json

@@ -41,6 +41,7 @@
 		"react-dom": "^18",
 		"react-icons": "^5.3.0",
 		"sonner": "^1.7.0",
+		"swr": "^2.2.5",
 		"tailwind-merge": "^2.5.4",
 		"tailwindcss-animate": "^1.0.7"
 	},

app/src/components/view/ranking/ImageList.tsx

@@ -1,8 +1,9 @@
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { fetcher } from "@/functions/fetcher";
 import type { ScoreDetail } from "@/types";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { VscListOrdered } from "react-icons/vsc";
+import useSWR from "swr";
 import { LoadingSpinner } from "../LoadingSpinner";
 
 type ImageListProps = {
@@ -15,31 +16,19 @@ const MODE = {
 } as const;
 
 export const ImageList = ({ setMode }: ImageListProps) => {
-	const [isLoading, setIsLoading] = useState<boolean>(true);
+	const { data, error, isLoading } = useSWR("/api/score/imagelist", fetcher);
 
-	const [scoreDetails, setScoreDetails] = useState<ScoreDetail[]>([]);
-	useEffect(() => {
-		const fetchData = () => {
-			setIsLoading(true);
-			return fetch("/api/score/imagelist")
-				.then((response) => {
-					if (!response.ok) {
-						throw new Error("Failed to fetch data");
-					}
-					return response.json();
-				})
-				.then((result) => setScoreDetails(result))
-				.catch((error) => console.error("Error fetching data:", error))
-				.finally(() => setIsLoading(false));
-		};
-
-		fetchData();
-	}, []);
+	// アサーションすみません
+	const scoreDetails = data as ScoreDetail[];
 
 	if (isLoading) {
 		return <LoadingSpinner />;
 	}
 
+	if (error) {
+		console.error("Failed to fetch data");
+	}
+
 	return (
 		<div className="p-4">
 			<div className="flex justify-end mb-4">

app/src/components/view/ranking/RankingListAll.tsx

@@ -1,30 +1,15 @@
 import { Card } from "@/components/ui/card";
+import { fetcher } from "@/functions/fetcher";
 import type { RankingScores } from "@/types";
-import { useEffect, useState } from "react";
+import useSWR from "swr";
 import { LoadingSpinner } from "../LoadingSpinner";
 
-export default function RankingListAll() {
-	const [data, setData] = useState<RankingScores[]>([]);
-	const [isLoading, setIsLoading] = useState<boolean>(true);
-
-	useEffect(() => {
-		const fetchData = () => {
-			setIsLoading(true);
-			return fetch("/api/score/all")
-				.then((response) => {
-					if (!response.ok) {
-						throw new Error("Failed to fetch data");
-					}
-					return response.json();
-				})
-				.then((result) => setData(result))
-				.catch((error) => console.error("Error fetching data:", error))
-				.finally(() => setIsLoading(false));
-		};
-
-		fetchData();
-	}, []);
+export default function RankingListWeekly() {
+	const { data, error, isLoading } = useSWR("/api/score/all", fetcher);
 
+	if (error) {
+		console.error("Failed to fetch data");
+	}
 	if (isLoading) {
 		return <LoadingSpinner />;
 	}

app/src/components/view/ranking/RankingListWeekly.tsx

@@ -1,29 +1,15 @@
 import { Card } from "@/components/ui/card";
+import { fetcher } from "@/functions/fetcher";
 import type { RankingScores } from "@/types";
-import { useEffect, useState } from "react";
+import useSWR from "swr";
 import { LoadingSpinner } from "../LoadingSpinner";
 
 export default function RankingListWeekly() {
-	const [data, setData] = useState<RankingScores[]>([]);
-	const [isLoading, setIsLoading] = useState<boolean>(true);
+	const { data, error, isLoading } = useSWR("/api/score/week", fetcher);
 
-	useEffect(() => {
-		const fetchData = () => {
-			setIsLoading(true);
-			return fetch("/api/score/week")
-				.then((response) => {
-					if (!response.ok) {
-						throw new Error("Failed to fetch data");
-					}
-					return response.json();
-				})
-				.then((result) => setData(result))
-				.catch((error) => console.error("Error fetching data:", error))
-				.finally(() => setIsLoading(false));
-		};
-
-		fetchData();
-	}, []);
+	if (error) {
+		console.error("Failed to fetch data");
+	}
 
 	const getEmoji = (rank: number) => {
 		switch (rank) {

app/src/functions/fetcher.ts

@@ -0,0 +1,2 @@
+export const fetcher = (...args: [RequestInfo, RequestInit?]) =>
+	fetch(...args).then((res) => res.json());