useFetch custom hook

src/App.jsx

@@ -22,6 +22,7 @@ import { SearchAutoComplete } from "./pages/SearchAutoComplete/SearchAutoComplet
 import { TicTacToe } from "./pages/TicTacToe";
 import FeatureFlagGlobalState from "./pages/Feature-flag/context/FeatureFlagsContext";
 import { FeatureFlags } from "./pages/Feature-flag/FeatureFlags";
+import CustomHooks from "./pages/CustomHooks/CustomHooks";
 
 function App() {
   return (
@@ -73,6 +74,8 @@ function App() {
               </FeatureFlagGlobalState>
             }
           />
+          {/* Custom Hooks */}
+          <Route path="custom-hooks" element={<CustomHooks />} />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />

src/data/projects.js

@@ -68,6 +68,11 @@ export const projects = [
     id: 14,
     name: 'Feature Flags',
     path: 'feature-flags',
+  },
+  {
+    id: 15,
+    name: 'Custom Hooks',
+    path: 'custom-hooks'
   }
 ];
 

src/pages/CustomHooks/CustomHooks.jsx

@@ -0,0 +1,9 @@
+import UseFetchHookTest from "./use-fetch/test"
+
+const CustomHooks = () => {
+  return <div className="container flex flex-col gap-3 justify-start items-center py-10">
+    <UseFetchHookTest />
+  </div>
+}
+
+export default CustomHooks

src/pages/CustomHooks/use-fetch/test.jsx

@@ -0,0 +1,29 @@
+import useFetch from "./useFetch";
+
+const UseFetchHookTest = () => {
+  const { data, error, pending } = useFetch(
+    "https://dummyjson.com/products",
+    {},
+  );
+
+  console.log(error, data, pending);
+
+  return (
+    <div>
+      <h1 className="text-2xl font-mono text-center">
+        <span className="text-primary font-bold">useFetch</span> Hook
+      </h1>
+      {pending ? (
+        <div className="absolute inset-0 m-auto flex justify-center items-center">
+          <div className="loader "></div>
+        </div>
+      ) : error ? <h3 className="text-rose-500 text-lg">{error}</h3> : data && data.products && data.products.length ? (
+        data.products.map((productItem) => (
+          <p key={productItem.key} className="text-center">{productItem.title}</p>
+        ))
+      ) : null}
+    </div>
+  );
+};
+
+export default UseFetchHookTest;

src/pages/CustomHooks/use-fetch/useFetch.jsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+
+export default function useFetch(url, options = {}) {
+  // states
+  const [data, setData] = useState(null);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState(null);
+
+  async function fetchData() {
+    setPending(true);
+    try {
+      const response = await fetch(url, { ...options });
+      if (!response.ok) throw new Error(response.statusText);
+
+      const result = await response.json();
+      setData(result);
+      setError(null);
+      setPending(false);
+    } catch (error) {
+      setError(`${error}, Some Error Occured`);
+      setPending(false);
+    }
+  }
+
+  useEffect(() => {
+    fetchData();
+  }, [url]);
+
+  return { data, error, pending };
+}