Merge pull request #23 from TrumanH/230112-react-performance-improve

Performance improvement

src/App.js

@@ -1,13 +1,15 @@
-import { useEffect } from 'react';
+import { useEffect, lazy, Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import Home from './routes/home/home.component';
 import Navigation from './routes/navigation/navigation.component';
-import Authentication from './routes/authentication/authentication.component';
-import Shop from './routes/shop/shop.component';
 import Checkout from './routes/checkout/checkout.component';
 import { onAuthStateChangeListener, createUserDocumentFromAuth } from './utils/firebase/firebase.utils';
 import { useDispatch } from 'react-redux';
 import { setUser } from './store/user/user.slice';
+import Spinner from './components/spinner/spinner.component';
+
+const Shop = lazy(()=> import('./routes/shop/shop.component'));
+const Authentication = lazy(()=>import('./routes/authentication/authentication.component'));
 
 const App = ()=> {
   const dispatch = useDispatch();
@@ -29,14 +31,16 @@ const App = ()=> {
   }, [dispatch]);
 
   return (
-    <Routes>
-      <Route path="/" element={<Navigation />}>
-        <Route index element={<Home/>} />
-        <Route path='shop/*' element={<Shop />} />
-        <Route path='auth' element={<Authentication />} />
-        <Route path='checkout' element={<Checkout />} />
-      </Route>
-    </Routes>
+    <Suspense callback={<Spinner />}>
+      <Routes>
+        <Route path="/" element={<Navigation />}>
+          <Route index element={<Home/>} />
+          <Route path='shop/*' element={<Shop />} />
+          <Route path='auth' element={<Authentication />} />
+          <Route path='checkout' element={<Checkout />} />
+        </Route>
+      </Routes>
+    </Suspense>
   );
 }
 

src/components/cart-item/cart-item.component.jsx → src/components/cart-item/cart-item.component.tsx

@@ -1,7 +1,13 @@
-
+import { FC, memo } from 'react';
 import { CartItemContainer, ItemDetails, Text } from './cart-item.styles';
+import { CartItem as CartItemT } from '../../store/cart/cart.slice';
+
+type CartItemProps = {
+    item: CartItemT,
+}
 
-const CartItem = ({item})=> {
+// memo: unless props changed, would not rerender the CartItem component.
+const CartItem: FC<CartItemProps> = memo(({item})=> {
     const {name, price, imageUrl, quantity} = item;
     return (
     <CartItemContainer>
@@ -12,6 +18,6 @@ const CartItem = ({item})=> {
         </ItemDetails>
     </CartItemContainer>
     )
-};
+});
 
 export default CartItem;

src/store/cart/cart.slice.js → src/store/cart/cart.slice.ts

@@ -1,14 +1,29 @@
 import { createSlice } from "@reduxjs/toolkit";
 
-const InitCartState = {
+export interface CartItem {
+  id: string,
+  name: string,
+  price: number,
+  quantity: number,
+  imageUrl: string,
+}
+
+interface CartState {
+  isCartOpen: boolean | null,
+  cartItems: CartItem[],
+  totalQuantity: number,
+  totalPrice: number,
+}
+
+const InitCartState: CartState = {
     isCartOpen: false,
     cartItems: [],
     totalQuantity: 0,
     totalPrice: 0,
 };
 
 // helper functions 
-const addItemToCart = (cartItems, itemToAdd) => {
+const addItemToCart = (cartItems: CartItem[], itemToAdd: CartItem) => {
     const existItem = cartItems.find((item)=> item.id===itemToAdd.id);
     if (existItem) {
         // If exist, just increase the quantity of the exist item.
@@ -17,18 +32,18 @@ const addItemToCart = (cartItems, itemToAdd) => {
     return [...cartItems, itemToAdd];
 };
 
-const descreaseItemFromCart = (cartItems, itemToDecrease) => {
+const descreaseItemFromCart = (cartItems: CartItem[], itemToDecrease: CartItem) => {
     const existItem = cartItems.find((item)=>item.id===itemToDecrease.id);
-    if (existItem.quantity===1) {
-        return cartItems.filter((item) => item.id!==itemToDecrease.id);
-    } else { // existItem.quantity > 1
-        return cartItems.map((item)=> item.id===itemToDecrease.id ? {...item, quantity:item.quantity-1} : item);
+    if (existItem && existItem.quantity>1) {
+      return cartItems.map((item)=> item.id===itemToDecrease.id ? {...item, quantity:item.quantity-1} : item);
+    } else { // existItem.quantity <= 1
+      return cartItems.filter((item) => item.id!==itemToDecrease.id);
     }
 };
 
-const removeItemFromCart = (cartItems, itemToRemove) => cartItems.filter((item) => item.id!==itemToRemove.id);
+const removeItemFromCart = (cartItems: CartItem[], itemToRemove: CartItem) => cartItems.filter((item) => item.id!==itemToRemove.id);
 
-const updateTotal = (state) => {
+const updateTotal = (state: CartState) => {
     const newTotalQuantity = state.cartItems.reduce((sum, item)=>sum+item.quantity, 0);
     state.totalQuantity = newTotalQuantity;
     const newTotalPrice = state.cartItems.reduce((sum, item)=>sum+item.quantity*item.price, 0);