react-rerendering-benchmarks · SpitfireSatya · Oct 2, 2024 · Oct 13, 2024 · Oct 13, 2024
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,10 @@
+import { memo } from "react";
 import "./App.css";
 import Home from "./Pages/Home/Home";
-
-function App() {
-  return (
-    <div className="App container mx-auto" >
+const App = memo(function App() {
+  console.log(window.globalCount++);
+  return <div className="App container mx-auto">
       <Home />
-    </div>
-  );
-}
-
-export default App;
+    </div>;
+});
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -1,8 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import App from "./App";
-
 test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
-});
+});
diff --git a/src/Components/Buttons/InstallPWAButton.js b/src/Components/Buttons/InstallPWAButton.js
@@ -1,42 +1,32 @@
+import { useRef } from "react";
+import { memo } from "react";
 import React, { useEffect, useState } from "react";
 import { ArrowDownTrayIcon } from "@heroicons/react/24/solid";
-
-const InstallPWAButton = () => {
-  const [supportsPWA, setSupportsPWA] = useState(false);
-  const [promptInstall, setPromptInstall] = useState(null);
-
+const InstallPWAButton = memo(() => {
+  console.log(window.globalCount++);
+  const supportsPWA = useRef(false);
+  const promptInstall = useRef(null);
   useEffect(() => {
-    const handler = (e) => {
+    const handler = e => {
       e.preventDefault();
-      setSupportsPWA(true);
-      setPromptInstall(e);
+      supportsPWA.current = true;
+      promptInstall.current = e;
     };
     window.addEventListener("beforeinstallprompt", handler);
-
     return () => window.removeEventListener("transitionend", handler);
   }, []);
-
-  const onClick = (evt) => {
+  const onClick = evt => {
     evt.preventDefault();
-    if (!promptInstall) {
+    if (!promptInstall.current) {
       return;
     }
-    promptInstall.prompt();
+    promptInstall.current.prompt();
   };
-  if (!supportsPWA) {
+  if (!supportsPWA.current) {
     return null;
   }
-  return (
-    <button
-      className="icon"
-      id="setup_button"
-      aria-label="Install app"
-      title="Install app"
-      onClick={onClick}
-    >
+  return <button className="icon" id="setup_button" aria-label="Install app" title="Install app" onClick={onClick}>
       <ArrowDownTrayIcon className="w-5 h-5" />
-    </button>
-  );
-};
-
-export default InstallPWAButton;
+    </button>;
+});
+export default InstallPWAButton;
diff --git a/src/Components/Buttons/PrimaryButton.js b/src/Components/Buttons/PrimaryButton.js
@@ -1,11 +1,8 @@
 import React from "react";
-
-const PrimaryButton = (props) => {
-  return (
-    <button {...props} className={props.className + " btn"}>
+const PrimaryButton = props => {
+  console.log(window.globalCount++);
+  return <button {...props} className={props.className + " btn"}>
       {props?.label}
-    </button>
-  );
+    </button>;
 };
-
-export default PrimaryButton;
+export default PrimaryButton;
diff --git a/src/Components/Buttons/ToogleTheme.js b/src/Components/Buttons/ToogleTheme.js
@@ -1,21 +1,13 @@
+import { memo } from "react";
 import { useTheme } from "next-themes";
 import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";
-
-export default function ToggleTheme() {
-  const { theme, setTheme } = useTheme();
-
-  return (
-    <button
-      aria-label="Toggle Dark Mode"
-      type="button"
-      className="icon"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-    >
-      {theme === "dark" ? (
-        <SunIcon className="w-5 h-5" />
-      ) : (
-        <MoonIcon className="w-5 h-5" />
-      )}
-    </button>
-  );
-}
+export default memo(function ToggleTheme() {
+  console.log(window.globalCount++);
+  const {
+    theme,
+    setTheme
+  } = useTheme();
+  return <button aria-label="Toggle Dark Mode" type="button" className="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
+      {theme === "dark" ? <SunIcon className="w-5 h-5" /> : <MoonIcon className="w-5 h-5" />}
+    </button>;
+});
diff --git a/src/Components/Shared/Footer/Footer.js b/src/Components/Shared/Footer/Footer.js
@@ -1,52 +1,35 @@
+import { memo } from "react";
 import React from "react";
-
-const GitHubIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 496 512"
-      className="w-7 h-7 ml-2 dark:fill-gray-50 fill-gray-600"
-    >
+const GitHubIcon = memo(() => {
+  console.log(window.globalCount++);
+  return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" className="w-7 h-7 ml-2 dark:fill-gray-50 fill-gray-600">
       <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
-    </svg>
-  );
-};
-
-const Footer = () => {
-  return (
-    <footer class="p-4 bg-gray-50 dark:bg-gray-800 rounded shadow md:flex md:items-center md:justify-between md:p-6 mt-10 text-gray-600 dark:text-gray-50">
+    </svg>;
+});
+const Footer = memo(() => {
+  console.log(window.globalCount++);
+  return <footer class="p-4 bg-gray-50 dark:bg-gray-800 rounded shadow md:flex md:items-center md:justify-between md:p-6 mt-10 text-gray-600 dark:text-gray-50">
       <span></span>
       <span class="text-sm sm:text-center">
-        <a
-          href="https://github.com/mahadihassanriyadh/chicken-coop#contributors"
-          class="hover:underline"
-        >
+        <a href="https://github.com/mahadihassanriyadh/chicken-coop#contributors" class="hover:underline">
           Contributors
         </a>{" "}
         ::
-        <a
-          href="https://github.com/mahadihassanriyadh/chicken-coop/blob/main/LICENSE"
-          class="hover:underline"
-        >
+        <a href="https://github.com/mahadihassanriyadh/chicken-coop/blob/main/LICENSE" class="hover:underline">
           {" "}
           MIT license
         </a>
       </span>
       <ul class="flex flex-wrap items-center justify-center md:justify-end mt-3 text-sm text-gray-500 md:mt-0">
         <li>
-          <a
-            href="https://github.com/mahadihassanriyadh/chicken-coop"
-            class="mr-4 md:mr-6 flex items-center group"
-          >
+          <a href="https://github.com/mahadihassanriyadh/chicken-coop" class="mr-4 md:mr-6 flex items-center group">
             <span className="text-xl group-hover:text-yellow-400 transition">
               ★
             </span>{" "}
             <GitHubIcon />
           </a>
         </li>
       </ul>
-    </footer>
-  );
-};
-
-export default Footer;
+    </footer>;
+});
+export default Footer;
diff --git a/src/Pages/AvailableClasses/AvailableClasses.js b/src/Pages/AvailableClasses/AvailableClasses.js
@@ -1,98 +1,74 @@
+import { useRef } from "react";
+import { memo } from "react";
 import React, { useEffect, useState } from "react";
 import PrimaryButton from "../../Components/Buttons/PrimaryButton";
-import {
-    dayOptions,
-    timeOptions,
-    getCurrentTimeSlot,
-} from "../../data/daysAndTimeSlots";
-
-const AvailableClasses = () => {
-    const currentDay = new Date().toLocaleString("en-us", { weekday: "long" });
-    const currentTime = getCurrentTimeSlot();
-    const [availableClassrooms, setAvailableClassrooms] = useState({});
-    const [selectedDay, setSelectedDay] = useState(currentDay);
-    const [selectedTime, setSelectedTime] = useState(currentTime);
-    const [results, setResults] = useState([]);
-
-    useEffect(() => {
-        async function fetchData() {
-            const response = await fetch("/data.json");
-            const data = await response.json();
-            setAvailableClassrooms(data.availableRooms);
-        }
-        fetchData();
-    }, []);
-
-    const handleDayChange = (event) => {
-        setSelectedDay(event.target.value);
-    };
-    const handleTimeChange = (event) => {
-        setSelectedTime(event.target.value);
-    };
-    const handleOnSubmit = (event) => {
-        event.preventDefault();
-        if (selectedDay && selectedTime) {
-            setResults(availableClassrooms[selectedDay][selectedTime]);
-        }
-    };
-
-    return (
-        <div>
+import { dayOptions, timeOptions, getCurrentTimeSlot } from "../../data/daysAndTimeSlots";
+const AvailableClasses = memo(() => {
+  console.log(window.globalCount++);
+  const currentDay = new Date().toLocaleString("en-us", {
+    weekday: "long"
+  });
+  const currentTime = getCurrentTimeSlot();
+  const availableClassrooms = useRef({});
+  const selectedDay = useRef(currentDay);
+  const selectedTime = useRef(currentTime);
+  const [results, setResults] = useState([]);
+  useEffect(() => {
+    async function fetchData() {
+      const response = await fetch("/data.json");
+      const data = await response.json();
+      availableClassrooms.current = data.availableRooms;
+    }
+    fetchData();
+  }, []);
+  const handleDayChange = event => {
+    selectedDay.current.value = event.target.value;
+  };
+  const handleTimeChange = event => {
+    selectedTime.current.value = event.target.value;
+  };
+  const handleOnSubmit = event => {
+    event.preventDefault();
+    if (selectedDay.current.value && selectedTime.current.value) {
+      setResults(availableClassrooms.current[selectedDay.current.value][selectedTime.current.value]);
+    }
+  };
+  return <div>
             <form action="" onSubmit={handleOnSubmit} className="mx-3">
                 <div className="sm:flex justify-center sm:space-x-4 space-y-3 sm:space-y-0">
-                    <select
-                        id="day"
-                        className="select"
-                        onChange={handleDayChange}
-                        value={selectedDay}
-                    >
+                    <select id="day" className="select" ref={selectedDay}>
                         <option value="" disabled>
                             🌱 Select day
                         </option>
-                        {dayOptions?.map((option) => (
-                            <option key={option.value} value={option.value}>
+                        {dayOptions?.map(option => {
+            console.log(window.globalCount++);
+            return <option key={option.value} value={option.value}>
                                 {option.label}
-                            </option>
-                        ))}
+                            </option>;
+          })}
                     </select>
-                    <select
-                        id="time"
-                        className="select"
-                        onChange={handleTimeChange}
-                        value={selectedTime}
-                    >
+                    <select id="time" className="select" ref={selectedTime}>
                         <option value="" disabled>
                             ⏰ Select time slot
                         </option>
-                        {timeOptions?.map((option) => (
-                            <option key={option.value} value={option.value}>
+                        {timeOptions?.map(option => {
+            console.log(window.globalCount++);
+            return <option key={option.value} value={option.value}>
                                 {option.label}
-                            </option>
-                        ))}
+                            </option>;
+          })}
                     </select>
                 </div>
-                <PrimaryButton
-                    type="submit"
-                    label="Check Available Rooms"
-                    className="mt-4"
-                />
+                <PrimaryButton type="submit" label="Check Available Rooms" className="mt-4" />
             </form>
             <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-5 mt-6 mx-3">
-                {results?.map((result) => (
-                    <div
-                        className={`py-4 px-4 border rounded ${
-                            result.endsWith("L")
-                                ? `bg-blue-100 dark:bg-blue-800/30 dark:border-blue-600/30`
-                                : `bg-gray-50 dark:bg-gray-700 dark:border-gray-600`
-                        }`}
-                        key={result}
-                    >
+                {results?.map(result => {
+        console.log(window.globalCount++);
+        return <div className={`py-4 px-4 border rounded ${result.endsWith("L") ? `bg-blue-100 dark:bg-blue-800/30 dark:border-blue-600/30` : `bg-gray-50 dark:bg-gray-700 dark:border-gray-600`}`} key={result}>
                         <p>{result}</p>
-                    </div>
-                ))}
+                    </div>;
+      })}
             </div>
-        </div>
-    );
-};
-
-export default AvailableClasses;
+        </div>;
+});
+export default AvailableClasses;