big performance update : 1.Code Splitting 2.Memoization with react.memo

src/App.jsx

@@ -1,35 +1,50 @@
+import React, { lazy, Suspense, useState } from "react";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Route, Routes } from "react-router-dom";
-import { useState } from "react";
-// Data
-import menus from "./pages/tree-view/data";
-// Layouts
+// layout
 import Header from "@/layouts/header";
 // components
 import Starfield from "react-starfield";
 import Cursor from "./components/Cursor";
-// Pages
-import Home from "@/pages/Home";
-import NotFound from "@/pages/404";
-import Accordion from "@/pages/accordion/accordion";
-import RandomColor from "@/pages/RandomColor";
-import StarRating from "@/pages/StarRating";
-import ImageSlider from "@/pages/ImageSlider";
-import LoadMoreData from "./pages/LoadMoreData";
-import TreeView from "./pages/tree-view/TreeView";
-import QRCodeGenerator from "./pages/QRCodeGenerator";
-import LightDarkMode from "./pages/light-dark-mode/Light-dark-mode";
-import TabTest from "./pages/tree-view/custom-tabs/Tab-test";
-import { ModalPopup } from "./pages/CustomModalPopup/ModalPopup";
-import { GithubProfileFinder } from "./pages/GithubProfileFinder/GithubProfileFinder";
-import { SearchAutoComplete } from "./pages/SearchAutoComplete/SearchAutoComplete";
-import { TicTacToe } from "./pages/TicTacToe";
-import FeatureFlagGlobalState from "./pages/Feature-flag/context/FeatureFlagsContext";
-import { FeatureFlags } from "./pages/Feature-flag/FeatureFlags";
-import UseFetchHookTest from "./pages/CustomHooks/use-fetch/test";
-import UseOnClickOutsideTest from "./pages/CustomHooks/use-outside-click/test";
-import { UseWindowResizeTest } from "./pages/CustomHooks/use-window-resize/test";
-import ScrollToSection from "./pages/ScrollToSection";
+// Data
+import menus from "./pages/tree-view/data";
+
+// pages
+const Home = lazy(() => import("@/pages/Home"));
+const NotFound = lazy(() => import("@/pages/404"));
+const Accordion = lazy(() => import("@/pages/accordion/accordion"));
+const RandomColor = lazy(() => import("@/pages/RandomColor"));
+const StarRating = lazy(() => import("@/pages/StarRating"));
+const ImageSlider = lazy(() => import("@/pages/ImageSlider"));
+const LoadMoreData = lazy(() => import("@/pages/LoadMoreData"));
+const TreeView = lazy(() => import("@/pages/tree-view/TreeView"));
+const QRCodeGenerator = lazy(() => import("@/pages/QRCodeGenerator"));
+const LightDarkMode = lazy(
+  () => import("@/pages/light-dark-mode/Light-dark-mode"),
+);
+const TabTest = lazy(() => import("@/pages/tree-view/custom-tabs/Tab-test"));
+const ModalPopup = lazy(() => import("@/pages/CustomModalPopup/ModalPopup"));
+const GithubProfileFinder = lazy(
+  () => import("@/pages/GithubProfileFinder/GithubProfileFinder"),
+);
+const SearchAutoComplete = lazy(
+  () => import("@/pages/SearchAutoComplete/SearchAutoComplete"),
+);
+const TicTacToe = lazy(() => import("@/pages/TicTacToe"));
+const FeatureFlagGlobalState = lazy(
+  () => import("@/pages/Feature-flag/context/FeatureFlagsContext"),
+);
+const FeatureFlags = lazy(() => import("@/pages/Feature-flag/FeatureFlags"));
+const UseFetchHookTest = lazy(
+  () => import("@/pages/CustomHooks/use-fetch/test"),
+);
+const UseOnClickOutsideTest = lazy(
+  () => import("./pages/CustomHooks/use-outside-click/test"),
+);
+const UseWindowResizeTest = lazy(
+  () => import("./pages/CustomHooks/use-window-resize/test"),
+);
+const ScrollToSection = lazy(() => import("./pages/ScrollToSection"));
 
 function App() {
   const [cursorVariant, setCursorVariant] = useState("default");
@@ -46,78 +61,64 @@ function App() {
       </div>
 
       <Header setCursorVariant={setCursorVariant} />
-      <Routes>
-        <Route path="React-Projects">
-          <Route
-            index
-            element={
-              <>
-                {" "}
-                <Home setCursorVariant={setCursorVariant} />{" "}
-                <Cursor cursorVariant={cursorVariant} />{" "}
-              </>
-            }
-          />
-
-          {/* Accordion component */}
-          <Route path="accordion" element={<Accordion />} />
-          {/* Random color generator */}
-          <Route path="color-generator" element={<RandomColor />} />
-          {/* Star Rating */}
-          <Route path="star-rating" element={<StarRating />} />
-          {/* image Slider */}
-          <Route
-            path="image-slider"
-            element={
-              <ImageSlider url={"https://meme-api.com/gimme"} limit={10} />
-            }
-          />
-          {/* load more data button */}
-          <Route path="load-more-data" element={<LoadMoreData />} />
-          {/* tree view */}
-          <Route path="tree-view" element={<TreeView menus={menus} />} />
-          {/* generate QR code */}
-          <Route path="qr-code-generator" element={<QRCodeGenerator />} />
-          {/* Light Dark Mode */}
-          <Route path="light-dark-mode" element={<LightDarkMode />} />
-          {/* Custom tabs component */}
-          <Route path="custom-tabs" element={<TabTest />} />
-          {/* Custom Modal Popup */}
-          <Route path="modal-popup" element={<ModalPopup />} />
-          {/* Github Profile Finder */}
-          <Route
-            path="github-profile-finder"
-            element={<GithubProfileFinder />}
-          />
-          {/* Search Auto-Complete */}
-          <Route path="search-auto-complete" element={<SearchAutoComplete />} />
-          {/* Tic Tac Toe */}
-          <Route path="tic-tac-toe" element={<TicTacToe />} />
-          {/* Feature Flag */}
-          <Route
-            path="feature-flags"
-            element={
-              <FeatureFlagGlobalState>
-                <FeatureFlags />
-              </FeatureFlagGlobalState>
-            }
-          />
-          {/* useFetch */}
-          <Route path="use-fetch" element={<UseFetchHookTest />} />
-          {/* useOutsideClick */}
-          <Route path="use-outside-click" element={<UseOnClickOutsideTest />} />
-          {/* useWindowResize */}
-          <Route path="use-window-resize" element={<UseWindowResizeTest />} />
-          {/* scroll to particular section */}
-          <Route
-            path="scroll-to-particular-section"
-            element={<ScrollToSection />}
-          />
-
-          {/* Error Page */}
-          <Route path="*" element={<NotFound />} />
-        </Route>
-      </Routes>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Routes>
+          <Route path="React-Projects">
+            <Route
+              index
+              element={
+                <>
+                  <Home setCursorVariant={setCursorVariant} />
+                  <Cursor cursorVariant={cursorVariant} />
+                </>
+              }
+            />
+            <Route path="accordion" element={<Accordion />} />
+            <Route path="color-generator" element={<RandomColor />} />
+            <Route path="star-rating" element={<StarRating />} />
+            <Route
+              path="image-slider"
+              element={
+                <ImageSlider url={"https://meme-api.com/gimme"} limit={10} />
+              }
+            />
+            <Route path="load-more-data" element={<LoadMoreData />} />
+            <Route path="tree-view" element={<TreeView menus={menus} />} />
+            <Route path="qr-code-generator" element={<QRCodeGenerator />} />
+            <Route path="light-dark-mode" element={<LightDarkMode />} />
+            <Route path="custom-tabs" element={<TabTest />} />
+            <Route path="modal-popup" element={<ModalPopup />} />
+            <Route
+              path="github-profile-finder"
+              element={<GithubProfileFinder />}
+            />
+            <Route
+              path="search-auto-complete"
+              element={<SearchAutoComplete />}
+            />
+            <Route path="tic-tac-toe" element={<TicTacToe />} />
+            <Route
+              path="feature-flags"
+              element={
+                <FeatureFlagGlobalState>
+                  <FeatureFlags />
+                </FeatureFlagGlobalState>
+              }
+            />
+            <Route path="use-fetch" element={<UseFetchHookTest />} />
+            <Route
+              path="use-outside-click"
+              element={<UseOnClickOutsideTest />}
+            />
+            <Route path="use-window-resize" element={<UseWindowResizeTest />} />
+            <Route
+              path="scroll-to-particular-section"
+              element={<ScrollToSection />}
+            />
+            <Route path="*" element={<NotFound />} />
+          </Route>
+        </Routes>
+      </Suspense>
     </ThemeProvider>
   );
 }

src/layouts/header.jsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 // Assets
 import githubLogoDark from "@/assets/svg/github-mark-white.svg";
 import githubLogoLight from "@/assets/svg/github-mark.svg";
@@ -10,22 +11,22 @@ import NavLinks from "@/components/ui/NavLinks";
 import { Button } from "@/components/ui/button";
 import useWhatTheme from "@/lib/utils";
 
-function Header({ setCursorVariant }) {
+const Header = memo(function Header({ setCursorVariant }) {
+  const handleMouseEnter = () => setCursorVariant("text");
+  const handleMouseLeave = () => setCursorVariant("default");
+  const { theme } = useWhatTheme();
 
   return (
     <header className="bg-background px-6 py-3 max-h-[60px] w-full">
       <div className="container flex justify-between items-center max-sm:p-0">
-        <span
-          onMouseEnter={() => setCursorVariant("text")}
-          onMouseLeave={() => setCursorVariant("default")}
-        >
+        <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
           <Logo />
         </span>
-        <Navigation setCursorVariant={setCursorVariant} />
+        <Navigation setCursorVariant={setCursorVariant} theme={theme} />
       </div>
     </header>
   );
-}
+});
 
 function Logo() {
   return (
@@ -40,32 +41,26 @@ function Logo() {
   );
 }
 
-function Navigation({ setCursorVariant }) {
-  const { theme } = useWhatTheme()
+const Navigation = ({ setCursorVariant, theme }) => {
+  const handleMouseEnter = () => setCursorVariant("text");
+  const handleMouseLeave = () => setCursorVariant("default");
 
   return (
     <nav className="flex items-center gap-2 sm:gap-6">
-      <span
-        onMouseEnter={() => setCursorVariant("text")}
-        onMouseLeave={() => setCursorVariant("default")}
-      >
+      <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
         <DonateToPalestine />
       </span>
-      <span
-        onMouseEnter={() => setCursorVariant("text")}
-        onMouseLeave={() => setCursorVariant("default")}
-      >
+      <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
         <NavLinks
           logo={theme === "dark" ? githubLogoDark : githubLogoLight}
           name="Github"
           link="https://github.com/No0ne003/React-Project"
         />
       </span>
-
       <ModeToggle />
     </nav>
   );
-}
+};
 
 function DonateToPalestine() {
   return (

src/pages/CustomHooks/use-window-resize/test.jsx

@@ -1,6 +1,6 @@
 import useWindowResize from "./useWindowResize";
 
-export const UseWindowResizeTest = () => {
+const UseWindowResizeTest = () => {
   const windowSize = useWindowResize();
   const { width, height } = windowSize;
 
@@ -20,3 +20,5 @@ export const UseWindowResizeTest = () => {
     </div>
   );
 };
+
+export default UseWindowResizeTest

src/pages/CustomModalPopup/ModalPopup.jsx

@@ -2,7 +2,7 @@ import { Button } from "@/components/ui/button";
 import { useState } from "react";
 import { Modal } from "./Modal";
 
-export const ModalPopup = () => {
+const ModalPopup = () => {
   const [showModalPopup, setShowModalPopup] = useState(false)
 
   function handleToggleModalPopup() {
@@ -21,3 +21,5 @@ export const ModalPopup = () => {
     </div>
   );
 };
+
+export default ModalPopup

src/pages/Feature-flag/FeatureFlags.jsx

@@ -1,42 +1,45 @@
-import RandomColor from "../RandomColor";
-import { TicTacToe } from "../TicTacToe";
-import Accordion from "../accordion/accordion";
-import LightDarkMode from "../light-dark-mode/Light-dark-mode";
-import TreeView from "../tree-view/TreeView";
+import React, { lazy, useContext } from "react";
 import { FeatureFlagsContext } from "./context/FeatureFlagsContext";
 import menus from "../tree-view/data";
-import TabTest from "../tree-view/custom-tabs/Tab-test";
-import { useContext } from "react";
 
-export const FeatureFlags = () => {
+// Lazy loading components
+const LazyLightDarkMode = lazy(
+  () => import("../light-dark-mode/Light-dark-mode"),
+);
+const LazyTicTacToe = lazy(() => import("../TicTacToe"));
+const LazyRandomColor = lazy(() => import("../RandomColor"));
+const LazyAccordion = lazy(() => import("../accordion/accordion"));
+const LazyTreeView = lazy(() => import("../tree-view/TreeView"));
+const LazyTabTest = lazy(() => import("../tree-view/custom-tabs/Tab-test"));
+
+export default function FeatureFlags() {
   const { loading, enabledFlags } = useContext(FeatureFlagsContext);
 
   const componentsToRender = [
     {
       key: "showLightAndDarkMode",
-      component: <LightDarkMode />,
+      component: <LazyLightDarkMode />,
     },
-
     {
       key: "showTicTacToeBoard",
-      component: <TicTacToe />,
+      component: <LazyTicTacToe />,
     },
     {
       key: "showRandomColorGenerator",
-      component: <RandomColor />,
+      component: <LazyRandomColor />,
     },
     {
       key: "showAccordion",
-      component: <Accordion />,
+      component: <LazyAccordion />,
     },
     {
       key: "showTreeView",
-      component: <TreeView menus={menus} />,
+      component: <LazyTreeView menus={menus} />,
     },
     {
-      key : 'showTabs',
-      component : <TabTest />
-    }
+      key: "showTabs",
+      component: <LazyTabTest />,
+    },
   ];
 
   function checkEnabledFlags(getCurrentKey) {
@@ -47,7 +50,9 @@ export const FeatureFlags = () => {
 
   return (
     <div>
-      <h1 className="text-2xl text-center py-4 bg-primary text-primary-foreground">Feature Flags</h1>
+      <h1 className="text-2xl text-center py-4 bg-primary text-primary-foreground">
+        Feature Flags
+      </h1>
       {componentsToRender.map((componentItem) =>
         checkEnabledFlags(componentItem.key) ? componentItem.component : null,
       )}