Component lifecycle useEffect example and exercise implementation

src/App.jsx

@@ -1,9 +1,7 @@
-import { ClassComponent } from "./ClassComponent"
-import { FunctionComponent } from "./FunctionComponent"
+import { Child } from "./Child"
 
 function App() {
-  return <FunctionComponent />
-  //return <ClassComponent />
+  return <Child />
 }
 
 export default App

src/Child.jsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react"
+
+export function Child() {
+  const [name, setName] = useState("")
+  const [age, setAge] = useState(0)
+
+  //useEffect example
+  /* useEffect(() => {
+    console.log("Name or age was changed", name, age)
+  }, [name, age]) */
+
+  //useEffect Exercise
+  useEffect(() => {
+    console.log("Age has changed", age)
+  }, [age])
+
+  return (
+    <div>
+      <input value={name} onChange={(e) => setName(e.target.value)} />
+      <br />
+      <br />
+      <button onClick={() => setAge((currentAge) => currentAge - 1)}>-</button>
+      {age}
+      <button onClick={() => setAge((currentAge) => currentAge + 1)}>+</button>
+      <p>
+        My name is {name} and I am {age} years old
+      </p>
+    </div>
+  )
+}

src/main.jsx

@@ -2,8 +2,4 @@ import React from "react"
 import ReactDOM from "react-dom/client"
 import App from "./App.jsx"
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+ReactDOM.createRoot(document.getElementById("root")).render(<App />)