Merge pull request #34 from Chamindu36/ts-dev-migration

Optimizing performance with hooks and codesplitting

src/App.js

@@ -1,14 +1,20 @@
 import { Route, Routes } from "react-router";
-import { useEffect } from 'react';
+import { useEffect, lazy, Suspense } from 'react';
 import { useDispatch } from "react-redux";
 
 import { checkUserSession } from "./store/user/user.action";
 
-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 Spinner from "./components/spinner/spinner.component";
+
+// import Home from "./routes/home/home.component";
+// import Authentication from "./routes/authentication/authentication.component";
+
+// use dynamic imports instead of static imports
+const Home = lazy(() => import("./routes/home/home.component"));
+const Authentication = lazy(() => import("./routes/authentication/authentication.component"));
 
 const App = () => {
 
@@ -19,15 +25,19 @@ const App = () => {
     dispatch(checkUserSession());
   }, [dispatch]);
 
+  //Suspense is a component that allows us to wrap any part of our application that might be rendering some lazy components
+  //fallback is the component to be rendered while the lazy component is loading
   return (
-    <Routes>
-      <Route path="/" element={<Navigation />}>
-        <Route index element={<Home />} />
-        <Route path="auth" element={<Authentication />} />
-        <Route path="shop/*" element={<Shop />} />
-        <Route path='checkout' element={<Checkout />} />
-      </Route>
-    </Routes>
+    <Suspense fallback={<Spinner />}>
+      <Routes>
+        <Route path="/" element={<Navigation />}>
+          <Route index element={<Home />} />
+          <Route path="auth" element={<Authentication />} />
+          <Route path="shop/*" element={<Shop />} />
+          <Route path='checkout' element={<Checkout />} />
+        </Route>
+      </Routes>
+    </Suspense>
   );
 };
 

src/components/cart-dropdown/cart-dropdown.component.tsx

@@ -7,14 +7,17 @@ import Button from '../button/button.component';
 import CartItem from '../cart-item/cart-item.component';
 
 import { CartDropdownContainer, EmptyMessage, CartItems } from './cart-dropdown.styles';
+import { useCallback } from 'react';
 
 const CartDropdown = () => {
     const cartItems = useSelector(selectCartItems);
     const navigate = useNavigate();
 
-    const goToCheckoutHandler = () => {
+    // optimze the code by using useCallback hook to prevent the function from being re-created every time the component re-renders
+    // memoize the function so that it only changes when the cartItems changes
+    const goToCheckoutHandler = useCallback(() => {
         navigate('/checkout');
-    };
+    }, []);
 
     return (
         <CartDropdownContainer>