Added Custom Hooks

Author: michaelboateng1

src/App.js

@@ -35,7 +35,10 @@ import "./index.css";
 // import PropDrilling from "./advance_react/prop_drilling/prop_drilling";
 
 // ! /* ContextAPI/useContext */
-import ContextAPI from "./advance_react/useContext/useContext";
+// import ContextAPI from "./advance_react/useContext/useContext";
+
+// ! /* Custom Hooks */
+import Example from "./advance_react/custom_hooks/customHookExample";
 
 function App() {
   return (
@@ -73,7 +76,10 @@ function App() {
         {/* <PropDrilling /> */}
 
         {/* contextAPI/useContext */}
-        <ContextAPI />
+        {/* <ContextAPI /> */}
+
+        {/* Custom Hooks */}
+        <Example />
       </div>
     </React.Fragment>
   );

src/advance_react/custom_hooks/customHookExample.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+// importing custom hook
+import { useFetch } from "./useFetch";
+
+const url = "https://api.github.com/users";
+
+function Example() {
+  const { isLoading, data } = useFetch(url);
+  return <h1>{isLoading ? "Loading..." : "Data is in :)"}</h1>;
+}
+
+export default Example;

src/advance_react/custom_hooks/useFetch.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+
+export function useFetch(url) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  const getData = async () => {
+    try {
+      const response = await fetch(url);
+      const parseData = await response.json();
+      setData(parseData);
+      setIsLoading(false);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+  }, [url]);
+
+  return { isLoading, data };
+}