Merge pull request #77 from ethanniser/react-scan-rerenders

Fix react scan rerenders

next.config.mjs

@@ -3,6 +3,7 @@ const nextConfig = {
   experimental: {
     ppr: true,
     inlineCss: true,
+    reactCompiler: true,
   },
   typescript: {
     ignoreBuildErrors: true,

package.json

@@ -33,6 +33,7 @@
     "@vercel/postgres": "^0.10.0",
     "@vercel/speed-insights": "^1.0.12",
     "ai": "^3.4.16",
+    "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/app/globals.css

@@ -95,3 +95,7 @@ select:focus,
 textarea {
   font-size: 16px;
 }
+
+[aria-label="Close toast"] {
+  background-color: white;
+}

src/components/ui/link.tsx

@@ -2,7 +2,7 @@
 
 import NextLink from "next/link";
 import { useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 
 type PrefetchImage = {
   srcset: string;
@@ -33,18 +33,15 @@ async function prefetchImages(href: string) {
 }
 
 const seen = new Set<string>();
+const imageCache = new Map<string, PrefetchImage[]>();
 
 export const Link: typeof NextLink = (({ children, ...props }) => {
-  const [images, setImages] = useState<PrefetchImage[]>([]);
-  const [preloading, setPreloading] = useState<(() => void)[]>([]);
   const linkRef = useRef<HTMLAnchorElement>(null);
   const router = useRouter();
-  let prefetchTimeout: NodeJS.Timeout | null = null; // Track the timeout ID
+  let prefetchTimeout: NodeJS.Timeout | null = null;
 
   useEffect(() => {
-    if (props.prefetch === false) {
-      return;
-    }
+    if (props.prefetch === false) return;
 
     const linkElement = linkRef.current;
     if (!linkElement) return;
@@ -53,31 +50,32 @@ export const Link: typeof NextLink = (({ children, ...props }) => {
       (entries) => {
         const entry = entries[0];
         if (entry.isIntersecting) {
-          // Set a timeout to trigger prefetch after 1 second
           prefetchTimeout = setTimeout(async () => {
             router.prefetch(String(props.href));
-            await sleep(0); // We want the doc prefetches to happen first.
-            void prefetchImages(String(props.href)).then((images) => {
-              setImages(images);
-            }, console.error);
-            // Stop observing once images are prefetched
+            await sleep(0);
+
+            if (!imageCache.has(String(props.href))) {
+              void prefetchImages(String(props.href)).then((images) => {
+                imageCache.set(String(props.href), images);
+              }, console.error);
+            }
+
             observer.unobserve(entry.target);
-          }, 300); // 300ms delay
+          }, 300);
         } else if (prefetchTimeout) {
-          // If the element leaves the viewport before 1 second, cancel the prefetch
           clearTimeout(prefetchTimeout);
           prefetchTimeout = null;
         }
       },
-      { rootMargin: "0px", threshold: 0.1 }, // Trigger when at least 10% is visible
+      { rootMargin: "0px", threshold: 0.1 },
     );
 
     observer.observe(linkElement);
 
     return () => {
-      observer.disconnect(); // Cleanup the observer when the component unmounts
+      observer.disconnect();
       if (prefetchTimeout) {
-        clearTimeout(prefetchTimeout); // Clear any pending timeouts when component unmounts
+        clearTimeout(prefetchTimeout);
       }
     };
   }, [props.href, props.prefetch]);
@@ -88,19 +86,10 @@ export const Link: typeof NextLink = (({ children, ...props }) => {
       prefetch={false}
       onMouseEnter={() => {
         router.prefetch(String(props.href));
-        if (preloading.length) return;
-        const p: (() => void)[] = [];
+        const images = imageCache.get(String(props.href)) || [];
         for (const image of images) {
-          const remove = prefetchImage(image);
-          if (remove) p.push(remove);
-        }
-        setPreloading(p);
-      }}
-      onMouseLeave={() => {
-        for (const remove of preloading) {
-          remove();
+          prefetchImage(image);
         }
-        setPreloading([]);
       }}
       onMouseDown={(e) => {
         const url = new URL(String(props.href), window.location.href);
@@ -135,13 +124,4 @@ function prefetchImage(image: PrefetchImage) {
   img.srcset = image.srcset;
   img.src = image.src;
   img.alt = image.alt;
-  let done = false;
-  img.onload = img.onerror = () => {
-    done = true;
-  };
-  return () => {
-    if (done) return;
-    img.src = img.srcset = "";
-    seen.delete(image.srcset);
-  };
 }