chap 8.4 add sample code for useMemo

basic/src/App.js

@@ -10,6 +10,7 @@ import IterationSample from './IterationSample';
 import LifeCycleSample from './LifeCycleSample';
 import ErrorBoundary from './ErrorBoundary';
 import Info from './Info';
+import Average from './Average';
 
 function getRandomColor() {
   return '#' + Math.floor(Math.random() * 16777215).toString(16);
@@ -19,7 +20,7 @@ const App = () => {
   const [visible, setVisible] = useState(false);
 
   return (
-    <Info />
+    <Average />
   );
 };
 

basic/src/Average.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+
+const getAverage = numbers => {
+    console.log('Calculating average...');
+    if (numbers.length === 0) return 0;
+    const sum = numbers.reduce((a, b) => a + b);
+    return sum / numbers.length;
+};
+
+const Average = () => {
+    const [list, setList] = useState([]);
+    const [number, setNumber] = useState('');
+
+    const onChange = e => {
+        setNumber(e.target.value);
+    };
+
+    const onInsert = e => {
+        const nextList = list.concat(parseInt(number));
+        setList(nextList);
+        setNumber('');
+    };
+
+    return (
+        <div>
+            <input value={number} onChange={onChange} />
+            <button onClick={onInsert}>Insert</button>
+            <ul>
+                {list.map((value, index) => (
+                    <li key={index}>{value}</li>
+                ))}
+            </ul>
+            <div>
+                <b>Average:</b>{getAverage(list)}
+            </div>
+        </div>
+    );
+};
+
+export default Average;