Total コンポーネントを memo でメモ化

Author: mokajima

src/App.js

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 
 const App = () => {
   console.log('renders <App />');
@@ -58,7 +58,7 @@ const AddButton = ({ disabled, onClick }) => {
   );
 };
 
-const Total = ({ cartItems }) => {
+const Total = memo(({ cartItems }) => {
   console.log('renders <Total />');
 
   const total = useMemo(() => {
@@ -74,6 +74,6 @@ const Total = ({ cartItems }) => {
   }, [cartItems]);
 
   return <p>合計: {total}円</p>;
-};
+});
 
 export default App;