graphコンポーネントのuseEffectをhooksにまとめる

src/components/Graph.tsx

@@ -1,10 +1,11 @@
 'use client';
 import { usePopulation } from '@/hooks/api/usePopulation';
 import { useHighcharts } from '@/hooks/useHighcharts';
+import { useGrpph } from '@/hooks/useGraph';
 import Highcharts from 'highcharts';
 import HighchartsAccessibility from 'highcharts/modules/accessibility';
 import HighchartsReact from 'highcharts-react-official';
-import { type Dispatch, type SetStateAction, useEffect } from 'react';
+import { type Dispatch, type SetStateAction } from 'react';
 import type {
   DisplayConditions,
   PrefecturesList,
@@ -37,29 +38,13 @@ export const Graph = ({
     displayCondition,
     graphData,
   });
-
-  useEffect(() => setIsLoading(isLoading), [isLoading, setIsLoading]);
-
-  useEffect(() => {
-    if (!populationData) return;
-
-    const data = populationData.result;
-    const prefName = currentPrefectures.prefName;
-
-    setGraphData((prev) => {
-      if (!prev) {
-        return [{ result: data, prefName }];
-      }
-
-      const exsistData = prev.filter((item) => item.prefName === prefName);
-
-      if (exsistData.length === 0) {
-        return [...prev, { result: data, prefName }];
-      }
-
-      return prev;
-    });
-  }, [currentPrefectures, populationData, setGraphData]);
+  useGrpph({
+    currentPrefectures,
+    isLoading,
+    populationData,
+    setGraphData,
+    setIsLoading,
+  });
 
   return <HighchartsReact highcharts={Highcharts} options={options} />;
 };

src/hooks/useGraph.ts

@@ -0,0 +1,47 @@
+import { useEffect, type Dispatch, type SetStateAction } from 'react';
+import type { PrefecturesList } from '@/interfaces/prefectures';
+import type {
+  GetPopulationResponse,
+  PopulationGraphData,
+} from '@/interfaces/population';
+
+interface Props {
+  currentPrefectures: PrefecturesList;
+  isLoading: boolean;
+  populationData: GetPopulationResponse | undefined;
+  setGraphData: Dispatch<SetStateAction<PopulationGraphData[] | undefined>>;
+  setIsLoading: Dispatch<SetStateAction<boolean>>;
+}
+
+export const useGrpph = ({
+  currentPrefectures,
+  isLoading,
+  populationData,
+  setGraphData,
+  setIsLoading,
+}: Props) => {
+  useEffect(() => setIsLoading(isLoading), [isLoading, setIsLoading]);
+
+  useEffect(() => {
+    if (!populationData) return;
+
+    const data = populationData.result;
+    const prefName = currentPrefectures.prefName;
+
+    setGraphData((prev) => {
+      if (!prev) {
+        return [{ result: data, prefName }];
+      }
+
+      const exsistData = prev.filter((item) => item.prefName === prefName);
+
+      if (exsistData.length === 0) {
+        return [...prev, { result: data, prefName }];
+      }
+
+      return prev;
+    });
+  }, [currentPrefectures, populationData, setGraphData]);
+
+  return {};
+};

src/test/container.test.tsx

@@ -24,15 +24,15 @@ describe('containerのテスト', () => {
 
     const hokkaido = screen.getByDisplayValue('北海道');
 
-    await waitFor(async () => {
-      await userEvent.click(hokkaido);
-    });
+    await userEvent.click(hokkaido);
 
-    const element = screen.getByRole('heading', {
-      level: 2,
-      name: `${DisplayConditionsList['総人口']}グラフ`,
-    });
+    await waitFor(() => {
+      const element = screen.getByRole('heading', {
+        level: 2,
+        name: `${DisplayConditionsList['総人口']}グラフ`,
+      });
 
-    expect(element).toBeInTheDocument();
+      expect(element).toBeInTheDocument();
+    });
   });
 });