chap 8.4 modify sample code to use 'useMemo'

ye-geeee · Sep 6, 2021 · b64150c · b64150c
1 parent 5dc94f4
commit b64150c
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/basic/src/Average.js b/basic/src/Average.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 
 const getAverage = numbers => {
     console.log('Calculating average...');
@@ -21,6 +21,8 @@ const Average = () => {
         setNumber('');
     };
 
+    const avg = useMemo(() => getAverage(list), [list]);
+
     return (
         <div>
             <input value={number} onChange={onChange} />
@@ -31,7 +33,7 @@ const Average = () => {
                 ))}
             </ul>
             <div>
-                <b>Average:</b>{getAverage(list)}
+                <b>Average:</b>{avg}
             </div>
         </div>
     );