fix: Resolve React 19 compiler ESLint errors

  - Replace useState+useEffect patterns with useSyncExternalStore for
    client-side detection (auth, ThemeToggle, Search)
  - Rewrite useLocalStorage hook to use useSyncExternalStore
  - Convert setState-in-effect patterns to useMemo where applicable
  - Move Placeholder component outside render to fix "cannot create
    components during render" error
  - Replace <a> with <Link> in company page
  - Simplify CustomTextareaAutosize to avoid mutating prop refs
  - Restructure settings page to avoid JSX in try/catch
  - Add eslint-disable comments for intentional patterns
  - Ignore cdk/ directory in ESLint config

  Reduces ESLint errors from 23 to 0 for deployment compatibility.

Author: NiallJoeMaher

app/(app)/alpha/additional-details/_client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { redirect, useRouter, useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
 import {
@@ -228,23 +228,21 @@ function SlideTwo({ details }: { details: UserDetails }) {
     parsedDateOfBirth?.getDate(),
   );
 
-  const [listOfDaysInSelectedMonth, setListOfDaysInSelectedMonth] = useState([
-    0,
-  ]);
-
-  useEffect(() => {
-    // If year or month change, recalculate how many days are in the specified month
+  // Compute days in month directly from year/month (no state needed)
+  const listOfDaysInSelectedMonth = useMemo(() => {
     if (year && month !== undefined) {
       // Returns the last day of the month, by creating a date with day 0 of the following month.
-      const nummberOfDaysInMonth = new Date(year, month + 1, 0).getDate();
-      const daysArray = Array.from(
-        { length: nummberOfDaysInMonth },
+      const numberOfDaysInMonth = new Date(year, month + 1, 0).getDate();
+      return Array.from(
+        { length: numberOfDaysInMonth },
         (_, index) => index + 1,
       );
-      setListOfDaysInSelectedMonth(daysArray);
     }
+    return [0];
+  }, [year, month]);
 
-    // Update the date object when year, month or date change
+  // Update the date object when year, month or day change
+  useEffect(() => {
     if (year && month !== undefined && day) {
       let selectedDate: Date;
 
@@ -257,7 +255,7 @@ function SlideTwo({ details }: { details: UserDetails }) {
       }
       setValue("dateOfBirth", selectedDate.toISOString());
     }
-  }, [year, month, day]);
+  }, [year, month, day, setValue]);
 
   const startYearAgeDropdown = 1950;
   const endYearAgeDropdown = 2010;

app/(app)/auth/page.tsx

@@ -5,20 +5,24 @@ import Link from "next/link";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { THEME_MODES } from "@/components/Theme/ThemeToggle/ThemeToggle";
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
+
+// Subscribe to nothing - this is just to detect client-side rendering
+const emptySubscribe = () => () => {};
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
 
 export const PostAuthPage = (content: {
   heading: string;
   subHeading: string;
 }) => {
-  const [mounted, setMounted] = useState(false);
+  const mounted = useSyncExternalStore(
+    emptySubscribe,
+    getClientSnapshot,
+    getServerSnapshot,
+  );
   const { resolvedTheme } = useTheme();
 
-  // useEffect only happens on client not server
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   // if on server dont render. needed to prevent a hydration mismatch error
   if (!mounted) return null;
 

app/(app)/company/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { notFound } from "next/navigation";
+import Link from "next/link";
 import { companies } from "./config";
 
 export const metadata = {
@@ -64,12 +65,12 @@ export default async function Page(props: Props) {
           </div>
         </div>
         <div className="border-neutral-200 bg-neutral-100 p-4 dark:border-neutral-700 dark:bg-neutral-800">
-          <a
+          <Link
             href="/sponsorship"
             className="text-sm font-medium text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
           >
             ← Back to all sponsors
-          </a>
+          </Link>
         </div>
       </div>
     </div>

app/(app)/notifications/_client.tsx

@@ -12,6 +12,23 @@ import {
 import PageHeading from "@/components/PageHeading/PageHeading";
 import { api } from "@/server/trpc/react";
 
+// Moved outside to avoid "cannot create components during render" error
+const Placeholder = () => (
+  <div className="my-4 w-full border border-neutral-100 bg-neutral-100 p-4 shadow dark:border-white dark:bg-black">
+    <div className="animate-pulse">
+      <div className="flex space-x-4">
+        <div className="h-10 w-10 rounded-full bg-gray-300 dark:bg-neutral-800"></div>
+        <div className="flex-1 space-y-2 py-1">
+          <div className="grid grid-cols-8 gap-4">
+            <div className="col-span-6 h-4 rounded bg-gray-300 dark:bg-neutral-800"></div>
+            <div className="col-span-3 h-2 rounded bg-gray-300 dark:bg-neutral-800"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
 const Notifications = () => {
   const {
     status,
@@ -50,26 +67,10 @@ const Notifications = () => {
     if (inView && hasNextPage) {
       fetchNextPage();
     }
-  }, [inView]);
+  }, [inView, hasNextPage, fetchNextPage]);
 
   const noNotifications = !data?.pages[0].data.length;
 
-  const Placeholder = () => (
-    <div className="my-4 w-full border border-neutral-100 bg-neutral-100 p-4 shadow dark:border-white dark:bg-black">
-      <div className="animate-pulse">
-        <div className="flex space-x-4">
-          <div className="h-10 w-10 rounded-full bg-gray-300 dark:bg-neutral-800"></div>
-          <div className="flex-1 space-y-2 py-1">
-            <div className="grid grid-cols-8 gap-4">
-              <div className="col-span-6 h-4 rounded bg-gray-300 dark:bg-neutral-800"></div>
-              <div className="col-span-3 h-2 rounded bg-gray-300 dark:bg-neutral-800"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
   return (
     <>
       <div className="relative mx-4 max-w-2xl sm:mx-auto">

app/(app)/settings/page.tsx

@@ -70,15 +70,18 @@ export default async function Page() {
     return notFound();
   }
 
+  // Fetch newsletter status with error handling
+  let newsletterStatus = existingUser.newsletter;
   try {
-    const newsletter = await isUserSubscribedToNewsletter(session.user.email);
-    const cleanedUser = {
-      ...existingUser,
-      newsletter,
-    };
-    return <Content profile={cleanedUser} />;
+    newsletterStatus = await isUserSubscribedToNewsletter(session.user.email);
   } catch (error) {
     Sentry.captureException(error);
-    return <Content profile={existingUser} />;
+    // Fall back to existing newsletter status
   }
+
+  const cleanedUser = {
+    ...existingUser,
+    newsletter: newsletterStatus,
+  };
+  return <Content profile={cleanedUser} />;
 }

app/verify-email/_client.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@headlessui/react";
 import { AlertCircle, CheckCircle, Loader } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 
 function Content() {
   const params = useSearchParams();
@@ -12,16 +12,14 @@ function Content() {
     "idle" | "pending" | "success" | "error"
   >("idle");
   const [message, setMessage] = useState("");
-  const [token, setToken] = useState<string | null>(null);
+  // Get token directly from params (no need for separate state)
+  const token = params.get("token");
+  const hasVerified = useRef(false);
 
   useEffect(() => {
-    const tokenParam = params.get("token");
-    if (tokenParam && !token) {
-      setToken(tokenParam);
-    }
-  }, [params, token]);
+    // Prevent double verification in strict mode
+    if (hasVerified.current) return;
 
-  useEffect(() => {
     const verifyEmail = async () => {
       if (!token) {
         setStatus("error");
@@ -30,6 +28,7 @@ function Content() {
         );
         return;
       }
+      hasVerified.current = true;
       setStatus("pending");
 
       try {
@@ -41,7 +40,7 @@ function Content() {
           setStatus("error");
         }
         setMessage(data.message);
-      } catch (error) {
+      } catch {
         setStatus("error");
         setMessage(
           "An error occurred during verification. Please try again later.",

components/ArticleMenu/ArticleMenu.tsx

@@ -6,7 +6,7 @@ import {
   PopoverPanel,
   Transition,
 } from "@headlessui/react";
-import React, { Fragment, useEffect, useState } from "react";
+import React, { Fragment, useEffect, useMemo, useState } from "react";
 
 import { api } from "@/server/trpc/react";
 
@@ -20,11 +20,6 @@ import { type Session } from "next-auth";
 import { signIn } from "next-auth/react";
 import { ReportModal } from "../ReportModal/ReportModal";
 
-interface CopyToClipboardOption {
-  label: string;
-  href: string;
-}
-
 interface Props {
   session: Session | null;
   postId: string;
@@ -41,25 +36,23 @@ const ArticleMenu = ({
   postUrl,
 }: Props) => {
   const [copied, setCopied] = useState<boolean>(false);
-  const [copyToClipboard, setCopyToClipboard] = useState<CopyToClipboardOption>(
-    {
-      label: "",
-      href: "",
-    },
+
+  // Compute label from copied state (no side effect needed)
+  const label = useMemo(
+    () => (copied ? "Copied!" : "Copy to clipboard"),
+    [copied],
   );
 
-  const { label, href } = copyToClipboard;
+  // Get href on client side only
+  const href = typeof window !== "undefined" ? window.location.href : "";
 
   const { data, refetch } = api.post.sidebarData.useQuery({
     id: postId,
   });
 
   useEffect(() => {
-    setCopyToClipboard({
-      label: copied ? "Copied!" : "Copy to clipboard",
-      href: location.href,
-    });
-    const to = setTimeout(setCopied, 1000, false);
+    if (!copied) return;
+    const to = setTimeout(() => setCopied(false), 1000);
     return () => clearTimeout(to);
   }, [copied]);
 

components/CustomTextareAutosize/CustomTextareaAutosize.tsx

@@ -1,40 +1,26 @@
-import type { Ref, ForwardRefRenderFunction } from "react";
-import React, { forwardRef } from "react";
+import type { ForwardRefRenderFunction } from "react";
+import React, { forwardRef, useImperativeHandle } from "react";
 import type { TextareaAutosizeProps } from "react-textarea-autosize";
 import TextareaAutosize from "react-textarea-autosize";
 
-interface TextareaAutosizeWrapperProps extends TextareaAutosizeProps {
-  inputRef?: Ref<HTMLTextAreaElement>;
-}
-
+// Simplified wrapper that only uses forwarded ref
 const TextareaAutosizeWrapper: ForwardRefRenderFunction<
   HTMLTextAreaElement,
-  TextareaAutosizeWrapperProps
+  TextareaAutosizeProps
 > = (props, ref) => {
-  const { inputRef, ...rest } = props;
-
-  const combinedRef = (node: HTMLTextAreaElement | null) => {
-    if (ref) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else {
-        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current =
-          node;
-      }
-    }
+  const internalRef = React.useRef<HTMLTextAreaElement | null>(null);
 
-    if (inputRef) {
-      if (typeof inputRef === "function") {
-        inputRef(node);
-      } else {
-        (
-          inputRef as React.MutableRefObject<HTMLTextAreaElement | null>
-        ).current = node;
-      }
-    }
-  };
+  // Use useImperativeHandle to safely expose the ref
+  useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement, []);
 
-  return <TextareaAutosize ref={combinedRef} {...rest} />;
+  return (
+    <TextareaAutosize
+      ref={(node) => {
+        internalRef.current = node;
+      }}
+      {...props}
+    />
+  );
 };
 
 export default forwardRef(TextareaAutosizeWrapper);

components/Hero/Hero.tsx

@@ -140,25 +140,26 @@ const NightSky = () => {
     { x: 7, y: 37 },
   ];
 
-  const seededRandom = (function () {
-    const seed = 12345; // You can change this seed to get a different, but consistent, pattern
+  // Create a seeded random function (pure - based on index)
+  const seededRandom = (index: number) => {
+    const seed = 12345;
     let state = seed;
-    return function () {
+    for (let i = 0; i <= index; i++) {
       state = (state * 1664525 + 1013904223) % 4294967296;
-      return state / 4294967296;
-    };
-  })();
+    }
+    return state / 4294967296;
+  };
 
   const generateStars = () => {
     return starPositions.map((pos, i) => (
       <circle
         key={i}
         cx={pos.x}
         cy={pos.y}
-        r={seededRandom() * 0.15 + 0.05}
+        r={seededRandom(i * 3) * 0.15 + 0.05}
         fill="white"
-        opacity={seededRandom() * 0.5 + 0.3}
-        className={seededRandom() > 0.7 ? "twinkle" : ""}
+        opacity={seededRandom(i * 3 + 1) * 0.5 + 0.3}
+        className={seededRandom(i * 3 + 2) > 0.7 ? "twinkle" : ""}
       />
     ));
   };
@@ -176,14 +177,16 @@ const NightSky = () => {
       { x: 10, y: 40 },
       { x: 90, y: 10 },
     ];
+    // Start index after regular stars (40 stars * 3 properties each = 120)
+    const baseIndex = 120;
     return animatedStarPositions.map((pos, i) => (
       <circle
         key={`animated-${i}`}
         cx={pos.x}
         cy={pos.y}
-        r={seededRandom() * 0.2 + 0.1}
+        r={seededRandom(baseIndex + i * 2) * 0.2 + 0.1}
         fill="white"
-        opacity={seededRandom() * 0.5 + 0.5}
+        opacity={seededRandom(baseIndex + i * 2 + 1) * 0.5 + 0.5}
         className={`gentle-move${(i % 3) + 1}`}
       />
     ));