Add memo example

Author: rolandszoke

src/Memo/Function.jsx

@@ -0,0 +1,44 @@
+import React, { useState, useMemo, useCallback } from "react";
+
+const words = ["hey", "this", "is", "cool"];
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [wordIndex, setWordIndex] = useState(0);
+
+  const word = words[wordIndex];
+
+  const computeLetterCount = useCallback(word => {
+    let i = 0;
+    while (i < 1000000000) i++; // Fake expense
+    return word.length;
+  }, []);
+
+  const letterCount = useMemo(() => {
+    console.log("Calculate letter count...");
+    return computeLetterCount(word);
+  }, [word, computeLetterCount]);
+
+  return (
+    <>
+      <h2>Compute number of letters</h2>
+      <p>
+        "{word}" has {letterCount} letters
+      </p>
+      <button
+        onClick={() => {
+          const nextWordIndex =
+            wordIndex + 1 === words.length ? 0 : wordIndex + 1;
+          setWordIndex(nextWordIndex);
+        }}
+      >
+        Next word
+      </button>
+      <h2>Increment a counter</h2>
+      <p>Counter: {count}</p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </>
+  );
+}
+
+export default App;

src/index.jsx

@@ -17,6 +17,7 @@ import ContextClass from './Context/Class';
 import ContextFunc from './Context/Function';
 import LifecycleClass from './Lifecycle/Class';
 import LifecycleFunc from './Lifecycle/Function';
+import Memo from './Memo/Function';
 import CustomHook from './CustomHooks/Function';
 
 
@@ -33,6 +34,7 @@ ReactDOM.render(
           <li><Link to="/contextFunc">Context Func</Link></li>
           <li><Link to="/lifecycleClass">Lifecycle Class</Link></li>
           <li><Link to="/lifecycleFunc">Lifecycle Func</Link></li>
+          <li><Link to="/memo">Memo</Link></li>
           <li><Link to="/customHook">Custom Hook</Link></li>
         </ul>
       </nav>
@@ -45,6 +47,7 @@ ReactDOM.render(
         <Route exact path="/contextFunc" component={ContextFunc} />
         <Route exact path="/lifecycleClass" component={() => <LifecycleClass name="John" />} />
         <Route exact path="/lifecycleFunc" component={() => <LifecycleFunc name="John" />} />
+        <Route exact path="/memo" component={Memo} />
         <Route exact path="/customHook" component={() => <CustomHook name="John" />} />
       </Switch>
     </NameContext.Provider>