notes added

src/Context.js

@@ -7,7 +7,7 @@ const UserContext = createContext([
     suffix: 1,
     email: "bobbobberson@example.com"
   },
-  (obj) => obj
+  (obj) => obj //the reason putting this is to make typed with typescript easier
 ]);
 
 const LevelFive = () => {
@@ -49,13 +49,15 @@ const LevelTwo = () => (
 );
 
 const ContextComponent = () => {
-  const userState = useState({
-    firstName: "James",
-    lastName: "Jameson",
-    suffix: 1,
-    email: "jamesjameson@example.com"
-  });
+  // const userState = useState({
+  //   firstName: "James",
+  //   lastName: "Jameson",
+  //   suffix: 1,
+  //   email: "jamesjameson@example.com"
+  // });
 
+  const userState = useContext(UserContext);
+  //take with hook
   return (
     <UserContext.Provider value={userState}>
       <h1>first level</h1>

src/Effect.js

@@ -5,9 +5,19 @@ const EffectComponent = () => {
 
   useEffect(() => {
     const timer = setTimeout(() => setTime(new Date()), 1000);
-    return () => clearTimeout(timer);
+    return () => clearTimeout(timer); //same idea with component didunmount
   });
 
+  async function getPets() {
+    const obj = await fetch("https://pets-v2.dev-apis.com/pets");
+    const json = await obj.json();
+    console.log(json);
+  }
+
+  useEffect(() => {
+    getPets();
+  }, []);
+
   return <h1>useEffect Example: {time.toLocaleTimeString()}</h1>;
 };
 

src/State.js

@@ -6,7 +6,11 @@ const StateComponent = () => {
   return (
     <h1
       onClick={() => setIsGreen(!isGreen)}
-      style={{ color: isGreen ? "limegreen" : "crimson" }}
+      style={{
+        color: isGreen ? "limegreen" : "crimson",
+        cursor: "pointer",
+        userSelect: "none"
+      }}
     >
       useState Example
     </h1>