perf: fix React re-render issues — stabilize callbacks, memoize components, use refs for animation state

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

src/components/Markdown.tsx

@@ -88,8 +88,8 @@ const Markdown: React.FC<MarkdownProps> = ({ content, onDiagramNodeClick }) => {
   // Extract and strip diagram data markers from content
   const { cleanContent, diagramDataMap } = useMemo(() => extractDiagramData(content), [content]);
 
-  // Define markdown components
-  const MarkdownComponents: React.ComponentProps<typeof ReactMarkdown>['components'] = {
+  // Define markdown components — memoized to prevent ReactMarkdown full re-renders
+  const MarkdownComponents: React.ComponentProps<typeof ReactMarkdown>['components'] = useMemo(() => ({
     p({ children, ...props }: { children?: React.ReactNode }) {
       return <p className="mb-4 text-base leading-7 text-foreground" {...props}>{children}</p>;
     },
@@ -261,7 +261,7 @@ const Markdown: React.FC<MarkdownProps> = ({ content, onDiagramNodeClick }) => {
         </code>
       );
     },
-  };
+  }), [diagramDataMap, onDiagramNodeClick, explorerUrl]);
 
   return (
     <div className="prose prose-base dark:prose-invert max-w-none px-2 py-4">

src/components/landing/Hero3D.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
 import dynamic from 'next/dynamic';
 import { motion } from 'framer-motion';
 import { Environment } from '@react-three/drei';
@@ -21,7 +21,7 @@ interface Hero3DProps {
 }
 
 export default function Hero3D({ onSubmit, value, onChange, isSubmitting }: Hero3DProps) {
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const mousePositionRef = useRef({ x: 0, y: 0 });
   const [isMobile, setIsMobile] = useState(false);
   const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
 
@@ -45,10 +45,9 @@ export default function Hero3D({ onSubmit, value, onChange, isSubmitting }: Hero
 
   const handleMouseMove = useCallback((e: React.MouseEvent<HTMLElement>) => {
     if (prefersReducedMotion) return;
-    // Normalize mouse position to -1 to 1
-    const x = (e.clientX / window.innerWidth) * 2 - 1;
-    const y = -(e.clientY / window.innerHeight) * 2 + 1;
-    setMousePosition({ x, y });
+    // Normalize mouse position to -1 to 1 — written to ref to avoid React re-renders
+    mousePositionRef.current.x = (e.clientX / window.innerWidth) * 2 - 1;
+    mousePositionRef.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
   }, [prefersReducedMotion]);
 
   const animationProps = prefersReducedMotion
@@ -70,7 +69,7 @@ export default function Hero3D({ onSubmit, value, onChange, isSubmitting }: Hero
           >
             <ambientLight intensity={0.5} />
             <pointLight position={[10, 10, 10]} intensity={0.8} />
-            <KnowledgeCube mouse={mousePosition} />
+            <KnowledgeCube mouseRef={mousePositionRef} />
             <ParticleField />
             <Environment preset="city" />
           </Canvas>

src/components/landing/KnowledgeCube.tsx

@@ -1,19 +1,20 @@
 'use client';
 
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import { Float, Edges, MeshTransmissionMaterial } from '@react-three/drei';
 import * as THREE from 'three';
 
 interface KnowledgeCubeProps {
-  mouse: { x: number; y: number };
+  mouseRef: React.RefObject<{ x: number; y: number }>;
 }
 
-export default function KnowledgeCube({ mouse }: KnowledgeCubeProps) {
+export default function KnowledgeCube({ mouseRef }: KnowledgeCubeProps) {
   const meshRef = useRef<THREE.Mesh>(null);
 
   useFrame(() => {
     if (!meshRef.current) return;
+    const mouse = mouseRef.current;
 
     // Continuous Y rotation
     meshRef.current.rotation.y += 0.003;

src/hooks/useWikiGeneration.ts

@@ -64,6 +64,18 @@ interface UseWikiGenerationReturn {
   isRegenerating: string | null;
 }
 
+const CONCURRENCY_BY_PROVIDER: Record<string, number> = {
+  'google': 5,      // Flash 2.5 is fast with high rate limits
+  'openai': 3,      // GPT models have moderate rate limits
+  'openrouter': 2,  // Rate limits vary
+  'ollama': 1,      // Local models are CPU/GPU bound
+  'bedrock': 3,
+  'azure': 3,
+  'dashscope': 2,
+};
+
+const DEFAULT_CONCURRENCY = 3;
+
 export function useWikiGeneration(params: UseWikiGenerationParams): UseWikiGenerationReturn {
   const {
     effectiveRepoInfo,
@@ -96,6 +108,10 @@ export function useWikiGeneration(params: UseWikiGenerationParams): UseWikiGener
   const [structureRequestInProgress, setStructureRequestInProgress] = useState(false);
   const [isRegenerating, setIsRegenerating] = useState<string | null>(null);
 
+  // Ref to track generatedPages without causing callback re-creation
+  const generatedPagesRef = useRef(generatedPages);
+  useEffect(() => { generatedPagesRef.current = generatedPages; }, [generatedPages]);
+
   // Template configuration loaded from backend
   const templateConfigRef = useRef<TemplateConfig | null>(null);
 
@@ -125,7 +141,7 @@ export function useWikiGeneration(params: UseWikiGenerationParams): UseWikiGener
   const generatePageContent = useCallback(async (page: WikiPage, owner: string, repo: string) => {
     return new Promise<void>(async (resolve) => {
       try {
-        if (generatedPages[page.id]?.content) {
+        if (generatedPagesRef.current[page.id]?.content) {
           resolve();
           return;
         }
@@ -403,7 +419,7 @@ Remember:
         setLoadingMessage(undefined);
       }
     });
-  }, [generatedPages, currentToken, effectiveRepoInfo, selectedProviderState, selectedModelState, isCustomSelectedModelState, customSelectedModelState, modelExcludedDirs, modelExcludedFiles, language, activeContentRequests, generateFileUrl, modelIncludedDirs, modelIncludedFiles, setError, setLoadingMessage]);
+  }, [currentToken, effectiveRepoInfo, selectedProviderState, selectedModelState, isCustomSelectedModelState, customSelectedModelState, modelExcludedDirs, modelExcludedFiles, language, activeContentRequests, generateFileUrl, modelIncludedDirs, modelIncludedFiles, setError, setLoadingMessage]);
 
   // Determine the wiki structure from repository data
   const determineWikiStructure = useCallback(async (fileTree: string, readme: string, owner: string, repo: string) => {
@@ -940,16 +956,16 @@ IMPORTANT:
         setGenerationPhase('generating');
         console.log(`Starting generation for ${pages.length} pages with controlled concurrency`);
 
-        const MAX_CONCURRENT = 3;
+        const maxConcurrent = CONCURRENCY_BY_PROVIDER[selectedProviderState] || DEFAULT_CONCURRENCY;
         const queue = [...pages];
         let activeRequests = 0;
 
         const processQueue = () => {
-          while (queue.length > 0 && activeRequests < MAX_CONCURRENT) {
+          while (queue.length > 0 && activeRequests < maxConcurrent) {
             const page = queue.shift();
             if (page) {
               activeRequests++;
-              console.log(`Starting page ${page.title} (${activeRequests} active, ${queue.length} remaining)`);
+              console.log(`Starting page ${page.title} (${activeRequests} active, ${queue.length} remaining, concurrency=${maxConcurrent})`);
 
               generatePageContent(page, owner, repo)
                 .finally(() => {
@@ -962,7 +978,7 @@ IMPORTANT:
                     setIsLoading(false);
                     setLoadingMessage(undefined);
                   } else {
-                    if (queue.length > 0 && activeRequests < MAX_CONCURRENT) {
+                    if (queue.length > 0 && activeRequests < maxConcurrent) {
                       processQueue();
                     }
                   }