total を useMemo フックでメモ化

Author: mokajima

src/App.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 const App = () => {
   console.log('renders <App />');
@@ -61,15 +61,17 @@ const AddButton = ({ disabled, onClick }) => {
 const Total = ({ cartItems }) => {
   console.log('renders <Total />');
 
-  const total = cartItems.reduce((acc, cur) => {
-    const t = Date.now();
+  const total = useMemo(() => {
+    return cartItems.reduce((acc, cur) => {
+      const t = Date.now();
 
-    while (Date.now() - t < 100) {
-      // 擬似的に100ミリ秒の遅延を発生させる
-    }
+      while (Date.now() - t < 100) {
+        // 擬似的に100ミリ秒の遅延を発生させる
+      }
 
-    return cur.length * 100 + acc;
-  }, 0);
+      return cur.length * 100 + acc;
+    }, 0);
+  }, [cartItems]);
 
   return <p>合計: {total}円</p>;
 };