src/components/layout/Navbar.tsx

@@ -25,10 +25,22 @@ export function Navbar() {
 
   useEffect(() => {
     let ticking = false;
+    // Optimization: Track last state to avoid redundant setState calls
+    let prevIsScrolled = window.scrollY > 20;
+
+    // Set initial state correctly if page is loaded scrolled down
+    if (prevIsScrolled) {
+      setIsScrolled(true);
+    }
+
     const handleScroll = () => {
       if (!ticking) {
         window.requestAnimationFrame(() => {
-          setIsScrolled(window.scrollY > 20);
+          const currentIsScrolled = window.scrollY > 20;
+          if (currentIsScrolled !== prevIsScrolled) {
+            setIsScrolled(currentIsScrolled);
+            prevIsScrolled = currentIsScrolled;
+          }
           ticking = false;
         });
         ticking = true;