Fix React 19 ESLint errors and update ESLint config for Next.js 16

Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>

Author: Copilot

eslint.config.mjs

@@ -1,25 +1,19 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { defineConfig, globalIgnores } from 'eslint/config';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import nextTs from 'eslint-config-next/typescript';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-  {
-    ignores: [
-      "node_modules/**",
-      ".next/**",
-      "out/**",
-      "build/**",
-      "next-env.d.ts",
-    ],
-  },
-];
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts',
+    'node_modules/**',
+  ]),
+]);
 
 export default eslintConfig;

package-lock.json

@@ -32,67 +32,68 @@ const sizeClasses = {
   }
 }
 
+// Move components outside render to avoid recreation on each render
+const IconContent = ({ sizes }: { sizes: typeof sizeClasses[keyof typeof sizeClasses] }) => (
+  <div className={cn(
+    "inline-flex items-center justify-center",
+    sizes.container,
+    "relative"
+  )}>
+    {/* Left Chevron */}
+    <ChevronLeftIcon 
+      className={cn(
+        sizes.icon,
+        "text-primary/60"
+      )} 
+    />
+    {/* Central Lightning Bolt - The main focus */}
+    <LightningBoltIcon 
+      className={cn(
+        sizes.lightning,
+        "text-primary mx-0.5 relative z-10"
+      )} 
+    />
+    {/* Right Chevron */}
+    <ChevronRightIcon 
+      className={cn(
+        sizes.icon,
+        "text-primary/60"
+      )} 
+    />
+  </div>
+)
+
+const TextContent = ({ sizes }: { sizes: typeof sizeClasses[keyof typeof sizeClasses] }) => (
+  <span className={cn(sizes.text, "tracking-tight")}>
+    <span className="text-foreground">Code</span>
+    <span className="text-primary">Storm</span>
+    <span className="text-foreground"> Hub</span>
+  </span>
+)
+
 export function Logo({ className, size = 'md', variant = 'full' }: LogoProps) {
   const sizes = sizeClasses[size]
-  
-  const IconComponent = () => (
-    <div className={cn(
-      "inline-flex items-center justify-center",
-      sizes.container,
-      "relative"
-    )}>
-      {/* Left Chevron */}
-      <ChevronLeftIcon 
-        className={cn(
-          sizes.icon,
-          "text-primary/60"
-        )} 
-      />
-      {/* Central Lightning Bolt - The main focus */}
-      <LightningBoltIcon 
-        className={cn(
-          sizes.lightning,
-          "text-primary mx-0.5 relative z-10"
-        )} 
-      />
-      {/* Right Chevron */}
-      <ChevronRightIcon 
-        className={cn(
-          sizes.icon,
-          "text-primary/60"
-        )} 
-      />
-    </div>
-  )
-
-  const TextComponent = () => (
-    <span className={cn(sizes.text, "tracking-tight")}>
-      <span className="text-foreground">Code</span>
-      <span className="text-primary">Storm</span>
-      <span className="text-foreground"> Hub</span>
-    </span>
-  )
 
   if (variant === 'icon') {
     return (
       <div className={className}>
-        <IconComponent />
+        <IconContent sizes={sizes} />
       </div>
     )
   }
 
   if (variant === 'text') {
     return (
       <div className={className}>
-        <TextComponent />
+        <TextContent sizes={sizes} />
       </div>
     )
   }
 
   return (
     <div className={cn("flex items-center", sizes.spacing, className)}>
-      <IconComponent />
-      <TextComponent />
+      <IconContent sizes={sizes} />
+      <TextContent sizes={sizes} />
     </div>
   )
 }

src/components/ui/logo.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { createContext, useContext, useState, useEffect } from 'react'
+import React, { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react'
 
 export type Theme = 'light' | 'dark'
 
@@ -17,60 +17,63 @@ interface ThemeProviderProps {
   children: React.ReactNode
 }
 
+// Helper function to get initial theme
+function getInitialTheme(): Theme {
+  if (typeof window === 'undefined') return 'light'
+  
+  const stored = localStorage.getItem('theme') as Theme | null
+  if (stored && (stored === 'light' || stored === 'dark')) {
+    return stored
+  }
+  
+  // Check system preference
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  return prefersDark ? 'dark' : 'light'
+}
+
 export function ThemeProvider({ children }: ThemeProviderProps) {
-  const [theme, setThemeState] = useState<Theme>('light')
+  // Initialize with computed value to avoid state updates in useEffect
+  const [theme, setThemeState] = useState<Theme>(getInitialTheme)
   const [mounted, setMounted] = useState(false)
 
-  // Initialize theme on mount
+  // Apply theme to DOM only - no state updates here
   useEffect(() => {
-    setMounted(true)
-    
-    // Check for stored theme preference or default to system preference
-    const stored = localStorage.getItem('theme') as Theme | null
-    if (stored && (stored === 'light' || stored === 'dark')) {
-      setThemeState(stored)
-      applyTheme(stored)
-    } else {
-      // Check system preference
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-      const systemTheme: Theme = prefersDark ? 'dark' : 'light'
-      setThemeState(systemTheme)
-      applyTheme(systemTheme)
-    }
-  }, [])
-
-  const applyTheme = (newTheme: Theme) => {
     const root = document.documentElement
-    if (newTheme === 'dark') {
+    if (theme === 'dark') {
       root.classList.add('dark')
     } else {
       root.classList.remove('dark')
     }
-  }
+  }, [theme])
+  
+  // Separate effect for setting mounted state only once
+   
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setMounted(true)
+  }, [])
 
-  const toggleTheme = () => {
+  const toggleTheme = useCallback(() => {
     if (!mounted) return
 
     const newTheme: Theme = theme === 'light' ? 'dark' : 'light'
     setThemeState(newTheme)
     localStorage.setItem('theme', newTheme)
-    applyTheme(newTheme)
-  }
+  }, [theme, mounted])
 
-  const setTheme = (newTheme: Theme) => {
+  const setTheme = useCallback((newTheme: Theme) => {
     if (!mounted) return
 
     setThemeState(newTheme)
     localStorage.setItem('theme', newTheme)
-    applyTheme(newTheme)
-  }
+  }, [mounted])
 
-  const value: ThemeContextType = {
+  const value: ThemeContextType = useMemo(() => ({
     theme,
     toggleTheme,
     setTheme,
     mounted,
-  }
+  }), [theme, toggleTheme, setTheme, mounted])
 
   return (
     <ThemeContext.Provider value={value}>