Custom hook for loading the data!

Author: miorel

src/App.tsx

@@ -1,23 +1,13 @@
-import React, { useEffect } from "react";
+import React from "react";
 
 import styles from "./App.module.css";
-import useAppState from "./useAppState";
-import normalizeString from "./util/normalizeString";
+import useAppState from "./hooks/useAppState";
+import useLoadData from "./hooks/useLoadData";
 import pluralize from "./util/pluralize";
 
 function App() {
   const [state, dispatch] = useAppState();
-
-  useEffect(() => {
-    fetch("fruits.txt")
-      .then((response) => response.text())
-      .then((text) => {
-        dispatch({
-          type: "load-data",
-          wordPack: text.split("\n").map(normalizeString).filter(Boolean),
-        });
-      });
-  }, [dispatch]);
+  useLoadData(dispatch);
 
   switch (state.phase) {
     case "pre-game": {

src/useAppState.ts src/hooks/useAppState.tssrc/useAppState.ts renamed to src/hooks/useAppState.ts

@@ -1,7 +1,7 @@
 import { useReducer, type Dispatch } from "react";
 
-import getRandomElement from "./util/getRandomElement";
-import normalizeString from "./util/normalizeString";
+import getRandomElement from "../util/getRandomElement";
+import normalizeString from "../util/normalizeString";
 
 export type State = Readonly<
   | {

src/hooks/useLoadData.ts

@@ -0,0 +1,18 @@
+import { type Dispatch, useEffect } from "react";
+
+import normalizeString from "../util/normalizeString";
+
+export default function useLoadData(
+  dispatch: Dispatch<{ type: "load-data"; wordPack: readonly string[] }>,
+) {
+  useEffect(() => {
+    fetch("fruits.txt")
+      .then((response) => response.text())
+      .then((text) => {
+        dispatch({
+          type: "load-data",
+          wordPack: text.split("\n").map(normalizeString).filter(Boolean),
+        });
+      });
+  }, [dispatch]);
+}