React useCallback & useMemo H o Hook 🕉☮

src/App.js

@@ -40,15 +40,46 @@ import User from "./components/User/User";
 
 // import MyClassComponent from "./components/UseEffectHook/MyClassComponent";
 import MyFunComponent from "./components/UseEffectHook/MyFunComponent";
-import {useState} from "react";
+import {useState, useCallback, useMemo} from "react";
+
+// MemoCallback Here ****************************
+import Title from "./components/MemoCallback/Title";
+import ShowCount from "./components/MemoCallback/ShowCount";
+import Button from "./components/MemoCallback/Button";
 
 function App() {
     console.log('App component render');
     // const quantities = [1,2,3];
     const [show, setShow] = useState(true);
+
+    const [count1, setCount1] = useState(0);
+    const [count2, setCount2] = useState(0);
+
+    const incrementByOne = useCallback(() => {
+        setCount1((prevCount) => prevCount + 1)
+    }, []);
+
+    const incrementByFive = useCallback(() => {
+        setCount2((prevCount) => prevCount + 5)
+    }, []);
+
+    const isEvenOrFalse = useMemo(() => {
+        let i = 0;
+        while (i < 1000000000) i += 1;
+        return count1 % 2 === 0;
+    }, [count1])
+
     return (
         <div className="App">
-            <h1>Hello Sourav</h1>
+
+            <Title/>
+            <ShowCount count={count1} title='Count 1'/>
+            <span>{isEvenOrFalse ? 'Even' : 'Odd'}</span>
+            <Button handleClick={incrementByOne}>Increment By One</Button>
+            <ShowCount count={count2} title='Count 2'/>
+            <Button handleClick={incrementByFive}>Increment By Five</Button>
+            <hr/>
+
             {/*<Clock local='bn-BD'/>*/}
             {/*<Clock/>*/}
             {/*<ClockList quantities={quantities}/>*/}
@@ -172,4 +203,4 @@ function App() {
 //     }
 // }
 
-export default App;
+export default App;

src/components/MemoCallback/Button.js

@@ -0,0 +1,14 @@
+import React, {memo} from 'react';
+
+const Button = ({handleClick, children}) => {
+    console.log(`Rendering Button ${children}...`)
+    return (
+        <div>
+            <button type='button' onClick={handleClick}>
+                {children}
+            </button>
+        </div>
+    );
+};
+
+export default memo(Button);

src/components/MemoCallback/ShowCount.js

@@ -0,0 +1,14 @@
+import React, {memo} from 'react';
+
+const ShowCount = ({count, title}) => {
+    console.log(`Rendering ShowCount ${title}`)
+    return (
+        <div>
+            <p>
+                {title} {count}
+            </p>
+        </div>
+    );
+};
+
+export default memo(ShowCount);

src/components/MemoCallback/Title.js

@@ -0,0 +1,12 @@
+import React, {memo} from 'react';
+
+const Title = () => {
+    console.log('Title Rendering.....');
+    return (
+        <div>
+            <h2>useCallback Title</h2>
+        </div>
+    );
+};
+// Should not use for small rendering because
+export default memo(Title);