React sample apps: useEffect hook, Axios api calls

1 files changed, 37 insertions, 0 deletions

diff --git a/react/05-useeffect/src/App.jsx b/react/05-useeffect/src/App.jsx
new file mode 100644
index 0000000..4caa969
--- /dev/null
+++ b/react/05-useeffect/src/App.jsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from './assets/vite.svg'
+import heroImg from './assets/hero.png'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  useEffect(() => {
+    console.log('This runs on every render');
+  });
+
+  useEffect(() => {
+    console.log('This runs only once when the component mounts');
+  }, []);
+
+  useEffect(() => {
+    console.log(`This runs on mount and whenever count changes`);
+  }, [count]);
+
+  return (
+    <>
+
+      <button
+        type="button"
+        className="counter"
+        onClick={() => setCount((count) => count + 1)}
+      >
+        Count is {count}
+      </button>
+
+    </>
+  )
+}
+
+export default App